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