AngularJs——ng-repeat总结

最新推荐文章于 2024-01-28 05:15:00 发布

原创最新推荐文章于 2024-01-28 05:15:00 发布 · 7.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #checkbox

本文探讨AngularJS中的ng-repeat与ng-model结合使用时的问题及解决办法，介绍了如何利用filter实现高效数据筛选，还讲解了ng-repeat-start与ng-repeat-end指令的作用。

刚开始学习angularJs用ng-repeat觉得很简单就和jsp一样，后来在做项目的过程中问题就一一的展现出来了

1、ng-repeat与ng-model的结合

首先我们来看一段代码，然后再来解释，这段代码有什么问题，应该怎么去改

<div class="info-table">
<div class="info-line"></div>
<div ng-repeat="rule in assess.scoleRules" class="scoleAssess">
<div class="mon_content">
<input type="checkbox" ng-model="assess.check" ng-init="assess.check = false" ng-checked="assess.checked">
<span>{{rule.Name}}(总分{{rule.Score}}分)</span>
</div>
<div class="mon_content">
<span class="span4">评分规则:{{rule.Remark}}</span>
</div>
<div class="mon_content">
<span class="span2">扣分:</span>
<input type="text" ng-init="rule.deductScore = ''" ng-model="rule.deductScore"/>
</div>
<div class="mon_content">
<span class="span2">说明:</span>
<textarea ng-init="rule.deductRemark = ''" ng-model="rule.deductRemark"></textarea>
</div>
</div>
</div>

一般我们用ng-repeat的时候就是这样，讲 assess.scoleRules里的数据依次的展示出来，然而，我们运行后会发现问题，就是checkbox里的数据，再循环后ng-model的只是一样的，如果你选中一个其他的就都一起被选中了，遇到了这样的问题我们应该怎样解决呢？

首先我们要将ng-model的名称换成rule.check，每一次循环后的ng-model控制的就不是同样的，然而接下来又有个问题出现了，那么我怎么样才能在js里知道那些被选中了了呢？毕竟虽然他们控制的是不一样的但是ng-model的名称是一样的，如果我们直接在js里用ng-model的值是不可行的

解决这个问题，我们可以有很多方案，这里介绍一个相对简便的方案，就是直接获得assess.scoleRules，然后通过for循环，来判断，assess.scoleRules.check的值，当他为true时则说明她被选中了

2、filter：过滤，可以用作筛选，简便了操作可以不用再通过条件到后台重新取数据然后在生成表，加快了效率

jsp:

<div class="well">
<span class="label">search all，对整条数据进行搜索:</span>
<input type="search" ng-model="q" placeholder="filter friends..."/> <span class="text-muted">加上前缀 ! 可以取反</span><br/><br/>

<span class="label">age 判断年龄大于></span>
<input type="search" ng-model="age" placeholder="filter friends..."/><br/><br/>

<span class="label">search by name通过姓名来搜索:</span>
<input type="search" ng-model="query.name" placeholder="filter friends..."/><br/><br/>

<span class="label">search by gender通过性别来搜索:</span>
<input type="search" ng-model="query.gender" placeholder="filter friends..."/><br/><br/>

<span class="label">use filter in controller通过js里的要求来搜索:</span>
<input type="search" ng-model="qInCtrl" placeholder="filter friends..."/><br/><br/>

<span class="label">limit展示的限制:</span>
<input type="search" ng-model="limit" placeholder="limit friends..." ng-init="limit=10"/><br/><br/>

<span class="label">order by按照什么来排序:</span> <select ng-model="friendsOrderBy" ng-options="o for o in orderByOptions"></select>  
reverse: <label><input type="radio" ng-model="reverse" value="false">false</label>
<label><input type="radio" ng-model="reverse" value="true">true</label><br/><br/>

<ul class="example-animate-container">
<li ng-class="{odd:$odd,even:$even}"
ng-repeat=" friend in friends | filter:q | filter:filterAge | filter:query | orderBy:friendsOrderBy:reverse | limitTo:limit">
[{{$index + 1}}] {{friend.name}} is {{friend.age}} years old {{friend.gender}}.
</li>
</ul>
</div>

js:

function Ctrl($scope, $filter) {

//循环的数据
$scope.friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];

//按照什么来排序
$scope.orderByOptions = ["name","age","gender"];
$scope.friendsOrderBy = "name";

//判断年龄大于输入值的数据
$scope.age = 0;
$scope.filterAge = function(item){
return item.age > $scope.age;
};

//按照输入值对整条数据进行搜索
var _friends = angular.copy($scope.friends);
$scope.$watch("qInCtrl", function(value){
$scope.friends = $filter("filter")(_friends, value);
});

}

3、ng-repeat-start,ng-repeat-end:循环的范围从开始到结束，并不是按标签结束

<div ng-repeat-start="team in teams" class="header">{{team.name}}</div>
<div ng-repeat="player in team.players">{{player.firstName}} {{player.lastName}}</div>
<div ng-repeat-end><br /></div>