AngularJs按属性分组

Question

我需要一种按属性对列表进行排序的方法。

我有这个笨蛋:http://jsfiddle.net/Tropicalista/aF2aL/1/

但不知道如何继续。我需要一种方法来根据我在复选框中选择的内容对列表进行排序...

function myCtrl($scope){
    $scope.friends = [

    {
        name: "Michael",
        gender: "Male",
        hair: "Brunette"
    },
    {
        name: "George Michael",
        gender: "Male",
        hair: "Brunette"
    },
    {
        name: "Gob",
        gender: "Male",
        hair: "Brunette"
    },
    {
        name: "Tobias",
        gender: "Male",
        hair: "Black"
    },
    {
        name: "Lindsay",
        gender: "Female",
        hair: "Blonde"
    },
    {
        name: "Maeby",
        gender: "Female",
        hair: "Black"
    }
];
$scope.orderBy = function(target){
    $scope.groups = _.groupBy($scope.friends, target);
}
$scope.activeGroups = {};

}

这是我的html:

<input type="checkbox" ng-click="orderBy('name')" />Name
<input type="checkbox" ng-click="orderBy('gender')" />Gender
<input type="checkbox" ng-click="orderBy('hair')" />Hair

<div data-ng-repeat="(myFilter, users) in groups">
    <h2>{{myFilter}}</h2>        
    <ul>
        <li data-ng-repeat="user in users">
        {{ user.name }}
        </li>
    </ul>
</div>

Answer 1

首先，对于这样的事情，我更喜欢使用 radio 而不是 checkbox。它在语义上是正确的。复选框表明您可以按多个字段进行分组，并且从您的问题中看不出您正在尝试这样做。

知道了这一点，您可以像这样定义您的 radio :

<input type="radio" ng-model="grouping" value="name"  />Name
<input type="radio" ng-model="grouping" value="gender" />Gender
<input type="radio" ng-model="grouping" value="hair" />Hair

现在，您可以告诉您的 ng-repeat 根据 groupedFriends 集合进行分组:

<div data-ng-repeat="(group, users) in groupedFriends">
    <h2>{{group}}</h2>        
    <ul>
        <li data-ng-repeat="user in users">
            {{ user.name }}
        </li>
    </ul>
</div>

然后您的 Controller 只观察 grouping 变量并对数据进行分组:

$scope.$watch('grouping', function() {
    $scope.groupedFriends = _.groupBy($scope.friends, $scope.grouping);
});

$scope.grouping = "gender";

这里是 working fiddle.

史蒂夫·霍尔特!