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

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

{{fruit.name}

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

---

这里有一个提示：

您可以在对象上绑定一个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>  

---

您的fiddle是第二个解决方案的最新版本。

您的数据中应该有一个额外的列，用于状态，默认为false（未选中），或者根据需要。然后将其用于ng模型 您的数据应如下所示

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

{{fruit.name |大写}}

检查下面的小提琴链接。这是完美的工作，因为你需要，

---

@Mickeel即使是更新后的也不能很好地工作，

下面是一个简单的示例，可以使用ng repeat中的ng模型复选框绑定数据：

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

“现在我想在顶部显示选中的列表，然后按字母顺序显示。”-这是唯一有用的句子，但你把它弄得太模糊了。改写它。@sza OP想先按

选中的
排序，然后按字母顺序排序（假设按
值
）。不确定是否理解：在筛选器中始终可以使用“fruit.checked”（就像我对“orderBy”所做的那样）。@RamalingaRaju“使用ng模型筛选数据”是什么意思？我使用这些复选框作为另一个数据的过滤器，并带有多个复选框选项。因此，我对您提供的解决方案有问题，请选中所有可根据需要工作的复选框，现在取消选中它按相反顺序排序的复选框。我的意思是取消选中“先到后选中”。
   <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>

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