【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();}}