剛開始學習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時則說明她被選中了

var detail = $scope.assess.scoleRules;
detail.forEach(function(e){  
 if(e.check&&e.deductScore!=""){
  $scope.assess.markingRule[$scope.assess.markingRule.length] = {
  "monthEvaluateId":$scope.assess.evaluateProblem.monthEvaluateId,
  "evaluateProblemId":$scope.assess.evaluateProblemId,"scoreRuleId": e.Id,
  "scoreRuleName":e.Name,"deductScore":e.deductScore,"remark":e.deductRemark};
  }
});

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>&nbsp;&nbsp;
    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>