使用ng-repeat构建一个复选框过滤器

I have a JSON object from which I'm building checkboxes using ng-repeat with orderBy: 'name':

我有一个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>

Now I want to sort my items first by "checked" and then alphabetically.

现在我想先按“勾选”，然后按字母顺序排序。

Here's a fiddle: http://jsfiddle.net/DqfTw/67/

这是一个小提琴:http://jsfiddle.net/DqfTw/67/

3 个解决方案

#1

you should have an additional column in your data for status with default false(unchecked), or as u needed. then use it for ng-model your data should be as below.

您的数据中应该有一个附加的列，用于默认为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}]

    }

then your html will be as

那么您的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>

check the below fiddle link. this works perfect as u needed, http://jsfiddle.net/DqfTw/90/

检查下面的小提琴链接。这是完美的，如你所需要的，http://jsfiddle.net/DqfTw/90/。

@Mickael even the updated one didn't work perfectly,

@Mickael，即使是最新的那个也不是很好，

#2

You can bind a checked attribute on your object and then use this in your orderBy clause :

您可以绑定对象上的已检查属性，然后在orderBy子句中使用:

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

Your fiddle is up to date.

你的小提琴是最新的。

EDIT : because undefined is not strictly equals to false, you can have bugs in order when you checked and unchecked a checkbox. You can initialize checked attribute of each data or use a custom function for checked attribute (a custom function is better in my opinion). Here is the code :

编辑:因为undefined并不严格等于false，所以在选中和选中复选框时，您可以将错误按顺序排列。您可以初始化每个数据的已检查属性，或者为已检查属性使用自定义函数(我认为自定义函数更好)。这里是代码:

HTML :

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>

Your Controller :

你的控制器:

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;
    };
}

Your fiddle is up to date with the second solution.

你的小提琴与第二种方法是最新的。

#3

here is a simple example to bind data with ng-model of checkboxes in ng-repeat: tutorial here

这里有一个简单的例子，它使用ng-repeat中的复选框的ng模型来绑定数据。

It is a good example with ng-value-true and ng-value-false :

这是一个关于ng-value-true和ng-value-false的很好的例子:

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

#1