angular常用功能

1、angular的強大的表單驗證

 (1)、表單必須有form標籤,並且form標籤上必須有一個name屬性

(2)、form中不能有action屬性。提交交由ng-submit處理

(3)、input標籤一定要有ng-model以及name屬性

使用方式:

<form name="form">
<div class="form-group" ng-class="{ 'has-error' : myDetail.userName.$invalid && myDetail.userName.$dirty}">
<label for="inputEmail3" class="col-sm-3 control-label" >姓名</label>
<div class="col-sm-8">
<input type="text" class="form-control"  placeholder="姓名" name="userName"  ng-model="entity.userName" ng-required="true">
</div>
<span class="glyphicon" aria-hidden="true" ng-class="{'alert-success glyphicon-ok': myDetail.userName.$valid,'hide' : myDetail.userName.$pristine,'alert-danger glyphicon-remove': myDetail.userName.$invalid}"></span>
</div>
</form>

<button ng-click="getFormStatus()">查看錶單狀態</button>

$scope.getFormStatus = function(){
console.log($scope.form.username.$valid);
 }

首先  input標籤中必須要有required 標籤否則後面的$scope.form.username.$valid的正確判斷是判斷不出來的!!!必須要有required required required 重要的事情說三遍

需要加一個空字段    ng-model="entity.userName" 這個值爲undefined

只有這樣,才能判斷出來這些值得狀態

然後$scope.form.$valid是判斷整個form表單的驗證是否通過,使我們不再需要用循環的方式去校驗form表單的標籤,減少了代碼量,相當強大

然後$scope.form的form是表單的name,然後的username是input的名字

$dirty是表單有填寫記錄

$valid 字段內容合法的

$invalid 字段內容非法的

$pristine 表單沒有填寫記錄

2、angular的過濾器

{{ 2015156815987 | date:"MM/dd/yyyy  hh:mm:ssa"}}   最後的a是區分上午和下午的   前面的數字爲時間戳,並不是我們日常的日期

<input type="text" ng-model="query"/>

<li ng-repeat="person in persons | filter:query| limitTo :4">

這樣子混合使用就會產生篩選列表內容的效果,可以作爲搜索歷史的方式

此外:過濾器還可以自定義

app.filter('filter1',function(){
return function(item){
return item+"ddddd";
}

});

使用的時候就是{{'aaaa'|filter1}}  顯示出來的結果就是aaaaddddd

3、刪除數組數據

$scope.cartDetail.splice(num,1);   第一個參數是刪除數組的第幾個下標,第二個參數是刪除多少個元素

4、angular的循環數組

 angular.forEach($scope.cartDetail,function(cartDetail){}

$scope.totlePrice=cartDetail.price*cartDetail.num+$scope.totlePrice;
});

第一個參數是數組名 

function 裏可以有三個參數。第一個數當前的數據eg:cartDetail【i】,第二個參數是當前的索引,第三個是數組

後面兩個參數可以省略

4、ng-class的強大使用方式

ng-class="{ 'hide' : myDetail.userName.$pristine||myDetail.userName.$valid}"表達式,如果表達式爲true,則hide類,有使用上,這個是多條件判斷,ps:注意值得位置不要有引號

ng-class=''{true: 'alert-danger glyphicon-remove ', false: 'alert-success glyphicon-ok'}[myDetail.userName.$invalid]''判斷後面中括號的值是否正確,正確類爲true的值,否則爲false的值




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章