3

プロパティでリストを並べ替える方法が必要です。

私はこのプランカーを持っています: 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>
4

2 に答える 2

5

まず、このような場合、私は a のradio代わりに aを使用することを好みcheckboxます。意味的に正しいです。チェックボックスは、複数のフィールドでグループ化できることを示しており、あなたの質問から、そうしようとしているようには見えません。

それを知っていれば、次のように無線を定義できます。

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

grouping次に、コントローラーは変数を監視し、データをグループ化します。

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

$scope.grouping = "gender";

これが実用的なフィドルです。

スティーブ・ホルト！

于 2013-09-09T00:56:09.450 に答える