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>
轉載于:https://www.cnblogs.com/SunShineM/p/6020765.html
總結
以上是生活随笔為你收集整理的angular具体用法及代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 程序设计基础
- 下一篇： Vue.js——60分钟快速入门