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>

检查以下小提琴链接。这可以完美地满足你的需要， http://jsfiddle.net/DqfTw/90/

@Mickael即使是更新过的也不能完美运作，

Answer 2

您可以绑定对象上的checked属性，然后在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>

你的小提琴是最新的。

编辑：因为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-repeat中的复选框的ng-model绑定数据：tutorial here

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

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

3 个答案: