2

我有一个 JSON 对象，我从中使用ng-repeatwith构建复选框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/

4

3 回答 3

2

您的数据中应该有一个额外的列，用于默认为 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 甚至更新的也不能完美运行，

于 2013-08-27T21:09:45.563 回答
1

你可以在你的对象上绑定一个选中的属性，然后在你的 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;
    };
}

你的小提琴是最新的第二个解决方案。

于 2013-08-26T14:45:38.513 回答
0

这是一个简单的示例，用于将数据与 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>
于 2014-08-27T13:36:48.833 回答