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的值