【ng】【js】【笔记】angularJs常用

1、select尽量用ng-options，不用ng-repeat

<select class="form-control" ng-model="pstm.ExtractionSampleTypeId" ng-options="typeItem.ExtractionSampleTypeId as typeItem.SampleType for typeItem in ProductExtractionSampleDTO">
    <option value="{{typeItem.ExtractionSampleTypeId}}">{{typeItem.SampleType}}</option>
</select>

2、弹窗和弹窗回调
----------父级页面----------

<div class="container" ng-controller="控件声明" ng-init="Init()" ng-cloak>
//js调用layer弹窗文档https://www.layui.com/doc/modules/layer.html#layer.confirm
layerIndex = layer.open({
   type: 2,
   title: title, //显示标题
   area: ['90%', '100%'], //宽高
   content: url,
   cancel: function () {
       //取消后
       scope.Search(1);
   }
});
//声明弹窗回调方法
scope.SelectedItemBack(selectedItem){
   layer.confirm('确定要(操作)吗？', { icon: 3, title: '提示' }, function (index) {
       Ajax.post(apiurl, {
       }, function (result) {
           if (index) {
               layer.close(index);
           }
           layer.msg("操作成功")
           scope.Search(1)
       });
   });
}
----------弹窗页面----------

<td class="" ng-if="isSelected">
   <button type="button" class="btn btn-success btn-xs" ng-click="SelectedItem(item)"> 选择</button>
</td>
//ng调用弹窗的父级页面的ng方法
scope.SelectedItem = function (item) {

   var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
   parent.layer.close(index);//关闭当前窗口

   //回调，选择器选到父级的ng域scope，调用回调方法
   parent.angular.element("div[ng-controller='控件声明']").scope().SelectedItemBack(item);
}

3、ng模块配置
var NgModelName = angular.module('NgModelName', []);
NgModelName.config(function ($httpProvider) {
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
})

4、ng过滤filter
//时间格式设置，调用：{{item.CreateTime | jsonDate:4}}
NgModelName.filter("jsonDate", function ($filter) {
    //{{data | jsonDate:4}}
    //formatType:默认 "yyyy-MM-dd HH:mm:ss" , 1 "yyyy-MM-dd "
    return function (input, formatType, text) {
        var format = "yyyy-MM-dd HH:mm:ss";
        if (!input) {
            return text ? text : "";
        }
        if (formatType && !isNaN(formatType)) {
            switch (formatType) {
                case 1:
                    format = "yyyy-MM-dd";
                    break;
                case 2:
                    format = 'yyyy-MM-dd HH:mm'
                    break;
                case 3:
                    format = 'yyyy-MM'
                    break;
                case 4:
                    format = 'yyyy-MM-dd HH:mm:ss'
                    break;
                default:
                    format = "yyyy-MM-dd";
                    break;
            }
        }
        //先得到时间戳
        var timestamp = Number(input.replace(//Date((d+))//, "$1"));

        //转成指定格式
        return $filter("date")(timestamp, format);
    }
});

//html标签
NgModelName.filter("showAsHtml", function ($sce) {
    return function (input) {
        return $sce.trustAsHtml(input);
    }
});

5、常用方法
重新渲染scope.$apply();或scope.$apply(function(){//执行部分});
异步重新渲染scope.$applyAsync();
事件禁止冒泡<input ng-click="SetIsBind($event)" /> , scope.SetIsBind=function(e){if (e) {e.stopPropagation();}}