Angular（内置命令、过滤器、数组、模块化开发）
angular的下载安装
- npm install angular
angular的内置命令（ng-开头）
ng-app：启动angular项目环境
<html lang="en" ng-app="appModule">- ng-model实现双向数据绑定
- 不会产生作用域
ng-repeat 重复循环
- 会产生单独作用域，域中变量不相通
数组避免代码压缩
b是arrs中的某一项 1.根据索引找出数组中的某一项【（key,value）in arrs】 （方法一） <li ng-repeat="(key,b) in arrs">{{key}}{{b}}</li> （方法二） <li ng-repeat="b in arrs">{{$index}}</li> 2.重复命名 遍历数组 track by 【$index 索引 key：属性名 】 <li ng-repeat="(key,b) in arrs track by $index">{{b}}</li>
ng-bind 取消数据闪烁
<div ng-bind="hello"></div>ng-cloak 取消闪烁（用于多个）
<style> [ng-cloak]{display:none;} </style> <ul ng-cloak> <li ng-repeat="(key,fruit) in fruits track by key">{{fruit}}</li> </ul>ng-non-bindable 取消数据绑定
- ng-controller 控制器
- ng-model-options
- {debounce:1000}–》隔1000毫秒后执行（可用于性能优化，防止数据不停发生改变）
- {updateOn:blur}–》失去焦点后发生变化
ng-class
隔行变色应用：ng-class=”{a:$even,b:$odd}”
<style> .a{background:pink;} .b{background:plum} </style> <tr ng-repeat="score in scores" ng-class="{a:$even,b:$odd}"></tr>
ng-bind-html
//这里实现的是将代码编译成HTML格式的 <td ng-bind-html="score.math | changeColor:query | asHtml"> </td> app.filter('ashtml',function($sce){ return function(data){ return $sce.trustAsHtml(data.toString()); //toString()保证是字符串，通过字符串格式使用trustAsHtml方法 } })- ng-hide/ng-show
- 操作的是样式
- ng-if
- 操作的是DOM元素 ，会产生作用域 if为false是，内部代码不执行
- ng-transclude ：保留原来的值
过滤器(数据按制定方式转换)
内置过滤器
1. 数字过滤器number
```
{{11552333 |number}} //-->11,552,333
```
2. 货币符号currency
```
{{222 | currency:'RMB'}} //=>222RMB
```
3. 日期过滤器
```
{{1487754370775 | data:'yyyy-MM-dd hh:mm:ss'}}
//->2017-02-22 05:06:01
[yyyy年MM月dd日 hh时mm分ss秒]
```
4. 大小写过滤器
```
{{'aaa' | uppercase}} //->AAA
{{'XXX' | lowercase}} //->xxx
```
5. 限制位数截取 limitTo
```
{{'这是一个限制位数的选择器' | limitTo:2}} //->这是
{{'这是一个限制位数的过滤器' | limitTo:-3}} //->过滤器
```
6. json 转为json格式
```
(1)
{{ {name:'wang'} | json}} //->{"name":"wang"}
(2)
<pre>{{ {name:'wang',age:'24',sex:'girl'} | json:4}}</pre>
//->{
"name":"wang",
"age":"24",
"sex":"girl"
}
【json:4 代表开头有四个空格】
```
自定义过滤器capitalize
1. 正则（根据规则对数据进行过滤筛选）
```
【param1:过滤器的名字 param2:过滤器的定义】
app.filter('capitalize',function(){
return function(data,param1,param2){
//要执行的操作
return str; //返回的内容是要展示的内容
}
}
```
选择器
按照一定的规则进行选择
根据数学排序 scores | orderBy:'math':true 倒序 <tr ng-repeat="score in scores | orderBy:'math':true track by $index" class="text-center"> filter:{math:query} 跟一个对象，指定在哪个字段里查询 filter:{math:query,chinese:query} 数学语文里边都有的 <tr ng-repeat="score in scores | orderBy:language:flag | filter:{math:query} track by $index" class="text-center">
angular数组操作
增加
push unshift- 删除
filter 返回结果
- false删除
- true留下
var id=3; var arr=[{name:1},{name:2},{name:3}]; var newArr=arr.filter(function (item,index) { return item.name!=id; //id不等于3的返回 },arr);//用foreach可以改变this指向 console.log(newArr);//-》 [ { name: 1 }, { name: 2 } ]
- 删除
修改
mapreturn值就是返回的数组
//return 什么 数组 就是什么 var id=3; var arr=[{name:1},{name:2},{name:3},{name:3}]; var obj={age:100}; var newArr=arr.map(function (item, index) { if(item.name==id){ return obj;//改的值 } return item; //将不改变的原封不动的返回 }); console.log(newArr);//[ { name: 1 }, { name: 2 }, { age: 100 }, { age: 100 } ]- 查找
find return值：要查找的对应项
var id=3; var arr=[{name:1},{name:2},{name:3},{name:3}]; var obj=arr.find(function (item, index) { //返回true表示找到了，会将当前的item那一项返回 return true {name:1} return item.name==3//找到name为3的 {name:3} }); console.log(obj);//{ name: 3 }
模块化开发的步骤
创建模块
- 两个参数，必须都写，参数二没有默认为空
- //angular.module(‘zfModule’);//获取
具体操作步骤
<html lang="en" ng-app="appModule"> <script> var app=angular.module('appModule',[]); </script>
创建控制器
- 参数
- 控制器的名字
- 控制器函数
$scope
- 创建控制器之后生成的作用域
- 域名不可更改
- $scope.xxx 把数据放在作用域中
- $scope=vm{{}} 获取作用域上数据
- $rootScope根作用域，不污染全局变量
作用域代码详解
app.controller('firstCtrl',function ($scope,$rootScope) { $scope.son='TOM'; var a=10;//取不到 $scope.b=100;//作用域上可以取得到【挂在原型上】 //这里可以定义变量，但是作用域上取不到 $rootScope.c=666;//根作用域属性，一般不在这里执行 });
- 控制器嵌套
- 范围和标签上一致
- 子承父业不可逆反（嵌套子继承父级）
- 注意点
- 控制器默认不执行
- 数据
控制器的创建
代码展示
<div ng-controller="控制器名称">{{son}}</div> app.controller('控制器名称',function () { //要执行的控制器的函数 })
- 参数
**完整详解**
<!DOCTYPE html>
<!--通过一个模块启动angular-->
<html lang="en" ng-app="zfModule">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-controller="firstCtrl">{{son}}</div>
<div ng-controller="secondCtrl">{{son}}</div>
<script src="../node_modules/angular/angular.js"></script>
<script>
//1.创建模块，一切从模块开始 <html lang="en" ng-app="zfModule">
var app=angular.module('zfModule',[]);
//2.创建阀门--控制器
app.run(function ($rootScope) {
$rootScope.cc=666
});
app.controller('firstCtrl',function ($scope) {
$scope.son='TOM';
var a=10;//取不到
$scope.b=100;//作用域上可以取得到【挂在原型上】
});
app.controller('secondCtrl',function ($scope) {
$scope.son='Tony'
});
/* 3.进行通知 在模块上加 ng-controller="控制器的名字"
<div ng-controller="firstCtrl">{{son}}</div>
<div ng-controller="secondCtrl">{{son}}</div>*/
/*4.将数据进行挂载
* $scope.son='Tony ‘ */
</script>
</body>
</html>
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
