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




猜你喜欢

转载自blog.csdn.net/qq_23114525/article/details/51005805