Question

我在$ scope变量中有一个数组，如下所示：

$scope.objects: [
  {selected: true, description: 'string1'},
  {selected: false, description: 'string2'},
  {selected: true, description: 'string3'},
  {selected: true, description: 'string4'}
]

“选定”属性可以通过UI中呈现的复选框进行更改。

我正在寻找一种方法来观察数组中的“选定”属性。每次更改时，都需要对数组进行重新排序。

需要将具有“selected：false”的对象放在数组的末尾。上面的数组看起来像这样。

$scope.objects: [
  {selected: true, description: 'string1'},
  {selected: true, description: 'string3'},
  {selected: true, description: 'string4'},
  {selected: false, description: 'string2'}
]

例如，如果将第二个元素的selected值更改为false，则数组应如下所示：

$scope.objects: [
  {selected: true, description: 'string1'},      
  {selected: true, description: 'string4'},
  {selected: false, description: 'string3'},
  {selected: false, description: 'string2'}
]

任何人都可以帮我吗？

格尔茨

Answer 1

您应该编写一个过滤器来为您排序。

我会尝试这样的事情，使用lodash 该片段未经过测试或其他任何内容，只需用记事本编写，但它可以为您提供一个起点。

app.filter('sortSelected', function() {
    return function(items) {
        var groups = _.groupBy(items, 'selected');
    };
    var selected = _.sortBy(groups[true], 'description');
    var unselected = _.sortBy(groups[false], 'description');

    return selected.concat(unselected);
});

Answer 2

发现它！

答案是基于Pjetr的想法。

在UI（以及遍历数组的ng-repeat）中：

<input type="checkbox" ng-change="orderUnselected()" ng-model="object.selected">

在控制器中：

$scope.orderUnselected = function() {
    var trues = [];
    var falses = [];

    for(var i = 0; i < $scope.objects.length; i++) {
        var obj = $scope.objects[i];
        if(obj.selected == true) {
            trues.push(obj);
        } else {
            falses.push(obj);
        }
    }

    $scope.objects = trues.concat(falses);
}

此解决方案有效，并且不会产生任何范围错误。

数据更改时组织数组

2 个答案: