angular具体用法及代码
1.templateUrl:'abc',
用这种方法时：
<script type="text/ng-template" id="abc">
<div>
<h1>标题</h1>
<p>放置内容的</p>
</div>
</script>
2.用scope这种时
scope:{
myStr:'@',//传递一个字符串作为属性的值
myAttr:'=',//绑定父作用域中的一个属性,在指令中调用
myFun:'&'//绑定父作用域中的一个函数,在指令中调用
},
<div my-tag my-str="lilei" my-attr="txt" my-fun="abc()"></div>
app.directive('myTag',function (){
return {
restrict:'AC',
replace:false,
scope:{
myStr:'@',//传递一个字符串作为属性的值
myAttr:'=',//绑定父作用域中的一个属性,在指令中调用
myFun:'&'//绑定父作用域中的一个函数,在指令中调用
},
template:'<div><h3>我名字叫:{{myStr}}</h3><h3>{{myAttr}}</h3><button ng-click="def()">点击我</button></div>'
}
});
3.link
link:function (scope,element,attr,controller){//指令逻辑代码区域
element.on('click','button',function (){
element.find('span').css('color','red');
});
},
template:'<div><h3>我名字叫:{{myStr}}</h3><h3>{{myAttr}}</h3><button>点击我</button><span>被控制元素</span></div>'
}
4.过滤器
<div ng-controller="myCtrl">
<h1>{{name | uppercase}}</h1>
<h1>{{name | lowercase}}</h1>
<h1>苹果7价格是：{{jg | currency:'￥'}}</h1>
</div>
5.filter
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" value="" ng-model="str">
<ul>
<li ng-repeat="per in data | filter:str">
<span>姓名：{{per.name}}</span>
<span>性别：{{per.sex}}</span>
<span>年龄：{{per.age}}</span>
</li>
</ul>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function ($scope){
$scope.str='';
$scope.data=[
{'name':'lilei','sex':'男','age':24},
{'name':'lily','sex':'女','age':22},
{'name':'lucy','sex':'女','age':28},
{'name':'jack','sex':'男','age':21},
{'name':'lilei','sex':'男','age':20},
{'name':'lily','sex':'女','age':31},
{'name':'lucy','sex':'女','age':35},
{'name':'jack','sex':'男','age':18}
];
})
</script>
</body>
6.自定义filter
<body ng-app="myApp">
<div class="box" ng-controller="myctrl">
<div class="head">
<span>编号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
</div>
<ul class="list">
<li ng-repeat="x in data | myfilter:0" ng-class-odd="'odd'" ng-class- even="'even'">
<span>{{$index+1}}</span>
<span>{{x.name}}</span>
<span>{{x.sex}}</span>
<span>{{x.age}}</span>
</li>
</ul>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myctrl',['$scope',function (scope){
scope.data=[
{'name':'刘一','sex':'男','age':21},
{'name':'杨二','sex':'女','age':20},
{'name':'张三','sex':'女','age':15},
{'name':'李四','sex':'男','age':23},
{'name':'王五','sex':'女','age':22},
{'name':'马六','sex':'男','age':25},
{'name':'全七','sex':'女','age':26},
{'name':'艾八','sex':'男','age':30},
{'name':'赵九','sex':'女','age':31},
{'name':'顾十','sex':'女','age':19},
{'name':'萧11','sex':'女','age':22}
];
}]);
app.filter('myfilter',function (){
//arr为调用过滤器时自动注入的数据data，
//sex为调用过滤器时传过来的参数0(myfilter:0)
return function (arr,sex){
var _arr=[];
var _sex=sex?'男':'女';
for (var i = 0; i < arr.length; i++) {
if (arr[i].sex==_sex&&arr[i].age>18&&arr[i].age<30) {
_arr.push(arr[i]);
};
};
return _arr;
}
});
</script>
</body>
