採用NG-重複

Question

我有一個JSON對象從我使用ng-repeat與orderBy: 'name'建設複選框建設複選框過濾器：

<div ng-controller="Ctrl"> 
    <ul> 
     <li ng-repeat="fruit in fruits | orderBy:'name'"> 
      <label> 
       <input type="checkbox" name="{{fruit.name}}" id="{{fruit.name}}"> 
       {{fruit.name}} 
      </label> 
     </li> 
    <ul> 
</div> 

現在，我想我的項目首先通過「檢查」，然後按字母順序排序。

這裏有一個小提琴：http://jsfiddle.net/DqfTw/67/

Answer 1

你應該在你的數據中有一個額外的狀態欄，默認爲false（未選中），或者你需要。然後將其用於ng-model 您的數據應如下所示。

$scope.fruits = 
      [{'name':'apple',status:false}, 
     {'name':'Mary',status:false}, 
     {'name':'Mike',status:false}, 
     {'name':'Adam',status:false}, 
     {'name':'Julie',status:false}] 

    } 

那麼你的HTML將作爲

<ul> 
<li ng-repeat="fruit in fruits | orderBy:['!status','name']"> 
    <label><input type="checkbox" name="{{fruit.name}}" ng-model="fruit.status" >{{fruit.name|uppercase}}</label></li> 
<ul> 

檢查下面的小提琴鏈接。這個完美的作品爲u需要， http://jsfiddle.net/DqfTw/90/

@Mickael甚至更新的一個不完美，

Answer 2

您可以在對象上綁定一個檢查屬性，那麼你的排序依據子句中使用這樣的：

<div ng-controller="Ctrl"> 
    <ul> 
     <li ng-repeat="fruit in fruits | orderBy:['checked', 'name']"> 
      <label><input type="checkbox" name="{{fruit.name}}" id="{{fruit.name}}" ng-model="fruit.checked">{{fruit.name}}</label> 
     </li> 
    <ul> 
</div> 

你的小提琴是最新的。

編輯：因爲undefined並不嚴格等於false，所以當您選中並取消選中複選框時，您可以按順序出現錯誤。您可以初始化每個數據的檢查屬性或使用自定義函數檢查屬性（我認爲自定義函數更好）。 下面是代碼：

HTML：

<div ng-controller="Ctrl"> 
    <ul> 
     <li ng-repeat="fruit in fruits | orderBy:[checkedFunction, 'name']"> 
      <label><input type="checkbox" name="{{fruit.name}}" id="{{fruit.name}}" ng-model="fruit.checked">{{fruit.name}}</label> 
     </li> 
    <ul> 
</div> 

控制器：

var app = angular.module('app', []); 

function Ctrl($scope) { 
    $scope.fruits = [ 
     {'name':'apple'}, 
     {'name':'Mary'}, 
     {'name':'Mike'}, 
     {'name':'Adam'}, 
     {'name':'Julie'} 
    ]; 

    $scope.checkedFunction = function(fruit) { 
     return fruit.checked || false; 
    }; 
} 

你的小提琴是最新的與第二個解。

Answer 3

這裏是綁定在NG-重複複選框的NG-模型數據一個簡單的例子：tutorial here

這是一個很好的例子，與NG-價值的真實，NG-值假：

<div ng-repeat="fruit in fruits"> 
<input type="checkbox" ng-model="fruit.name" ng-true-value="{{fruit.name}}" ng-false-value="{{fruit-name}} - unchecked" ng-change="filterMultipleSystem()"/><br/> 
</div>