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

【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、弹窗和弹窗回调
----------父级页面----------
<!--父级页面ng控件声明-->
<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();}}