AngularJS-Learning-Notes

AngularJS学习笔记摘要

1.日期格式化 $filter('date')(new Date(), 'yyyy-MM-dd'); start: $filter('date')($scope.orderListSearchForm.start,"yyyy-MM-dd"), end: $filter('date')($scope.orderListSearchForm.end,"yyyy-MM-dd"),

2.等价ng-if的页面判断显示问题 {{orderItem.sku.bundle ? "打包":"单品"}}

3.日期过滤器 {{orderItem.submitDate | date : "yyyy-MM-dd HH:mm:ss"}}

4.下拉选遍历数组 ng-options="o.value as o.name for o in availableStatus"

5.AngularJs table to excel： .factory('TableToExcel', function ($window) { var uri='data:application/vnd.ms-excel;base64,', template='

{table}', base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));}, format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})}; return { tableToExcel:function(tableId,worksheetName){ var table=$(tableId), ctx={worksheet:worksheetName,table:table.html()}, href=uri+base64(format(template,ctx)); return href; } }; })

$scope.exportToExcel = function(tableId) { var exportHref = TableToExcel.tableToExcel(tableId,'admin list'); $timeout(function(){location.href = exportHref;},100); }

Export to Excel

6.Angular+Bootstrap可编辑表格： bower install angular-xeditable

<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>

7.全选/反选 $scope.isCheckedAll = false; $scope.checkAll = function() { if(!($scope.isCheckedAll)){ angular.forEach($scope.zones, function(value, key){
$scope.formData.zoneIds.push(value.id); }); $scope.isCheckedAll = true; }else{ $scope.formData.zoneIds = []; $scope.isCheckedAll = false; } };

8.搜索条件表单

  

--全部--       在职 离职   

  搜  索   添加员工

9.ui-select: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2
http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

{{$select.selected.displayName}}

10.校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern等标签 表单中的输入框，你可以使用上面的标签来实现对用户输入的校验。

你可以通过 $scope.yourForm.inputText.$error.required 来判断输入框是否为空

你可以通过 $scope.yourForm.inputText.$invalid 来判断输入的内容是否满足ng-pattern，ng-maxlength，maxlength

你通过$scope.userNum获得的输入内容是去掉前后空白的，因为ng-trim的存在。

11.异步请求之$http对象 AngularJS提供了一个类似jquery的$.ajax的对象，用于异步请求。 在AngularJS中对异步操作是推崇至极的，所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。

$http({method : ‘POST’,params : { id:123}, data:{name:’john’,age:27}, url : “/mypath”}) .success(function(response, status, headers, config){ //do anything what you want; }) .error(function(response, status, headers, config){ //do anything what you want; });

如果你是POST请求，params里的数据会帮你拼到url后面，data里的数据会放到请求体中。

12.指令的使用范围 restrict 的取值可以有三种： A 用于元素的 Attribute，这是默认值 E 用于元素的名称 M 注释comment C 用于 CSS 中的 class

13.模态弹窗

×

提示信息

输入密码不正确，请重新输入。

确认 取消

  保  存