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(){
});
使用的时候就是{{'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的值