javascript - Angular 观察组未能始终如一地接收模型变化

Question

我有一个动态 orderBy 函数，用于 ng-repeat。我从另一篇文章中得到了帮助。他创造了一个笨蛋，效果很好。但是，当我与项目集成时，它没有按预期工作。我也使用所有引用文献的相同版本创建了 plunker。这是帖子的链接。 link to stackoverflow post

我已经将范围缩小到正在发生的事情。在页面加载时，您会看到空数组。

这是我应用过滤器的时候。

所选过滤器正在应用于阵列。但是 ng-repeat 没有发生任何变化。

这是删除所选过滤器后的结果。请注意，对象数组已将 更改为正确的值。但通过观察组功能中的断点，我意识到它没有捕捉到模型中的变化。

这是我重新应用相同过滤器时的情况。观察组获取模型更改并将其应用到 orderBy 数组，该数组应该是一个空数组。

我进行了三次检查，以确保 javascript 引用是相同的版本。但我不知道如何解决这个问题，因为 plunker 工作得很好？

这是我项目中的实际代码

    mapSidebarCtrl.orderBy = [];

    mapSidebarCtrl.orderOptions = [{
        name: 'Subdivision',
        value: false,
        fields: ['properties.name']
    }, {
        name: 'Total LOE',
        value: false,
        fields: ['metrics.loe.total']
    }, {
        name: 'Inventory',
        value: false,
        fields: ['metrics.inv.fut', 'metrics.inv.vdl', 'metrics.inv.mod', 'metrics.inv.uc', 'metrics.inv.fin', 'metrics.inv.total']
    }];

    $scope.$watchGroup(['mapSidebarCtrl.orderOptions[0].value', 'mapSidebarCtrl.orderOptions[1].value', 'mapSidebarCtrl.orderOptions[2].value'], function () {
        angular.forEach(mapSidebarCtrl.orderOptions, function (x) {
            if (x.value) {
                [].push.apply(mapSidebarCtrl.orderBy, x.fields);
            }
        });
    });

    SelectedTerritoryService.subscribeSelectedTerritorySubdivisions($scope, function selectedTerritorySubdivisions(event, args) {
        mapSidebarCtrl.territorySubdivisions = args
    });

html

    <div class="row">
    <div class="col-xs-12">
        <div class="panel-body p-xxs">
            <div class="row">
                <div class="col-xs-12">
                    <div class="btn-group">
                        <label class="btn btn-default btn-xs" ng-repeat="option in mapSidebarCtrl.orderOptions" ng-class="{ active: option.value }" ng-click="option.value = !option.value">
                            <i class="fa" ng-class="{ 'fa-sort-alpha-desc': option.value,  'fa-sort-alpha-asc': !option.value }"></i> {{ option.name }}
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel-body p-xs m-t-sm overflow" ng-style="resizeWithOffset(300)" resize>
    <div class="panel-body p-xxs"
         ng-repeat="subdivision in mapSidebarCtrl.territorySubdivisions | orderBy: mapSidebarCtrl.orderBy">
        <a ng-click="mapSidebarCtrl.selectSubdivision(subdivision.properties.id);">
            <div class="row">
                <div class="col-xs-12">
                    <div class="pull-right text-right">
                        <img src="https://placeimg.com/75/75/any">
                    </div>
                    <h5 class="m-b-xs"><span>{{subdivision.properties.name}}</span></h5>
                    <div class="m-b-xs"><span>{{subdivision.properties.status}}</span></div>
                    <div class="badges"> <i class="fa fa-star text-warning"></i> <i class="fa fa-star text-warning"></i> <i class="fa fa-star text-warning"></i> </div>
                </div>
            </div>
        </a>
    </div>
    <pre><code>{{ mapSidebarCtrl.orderOptions | json }}</code></pre>
    <pre><code>{{ mapSidebarCtrl.orderBy | json }}</code></pre>
</div>

Answer 1

您忘记清除 $watchGroup 回调函数中的数组。

$scope.$watchGroup(['vm.orderOptions[0].value', 'vm.orderOptions[1].value', 'vm.orderOptions[2].value'], function() {

  vm.orderBy = []; // <=- clear/reset the array

  angular.forEach(vm.orderOptions, function(x) {
    if (x.value) {
      [].push.apply(vm.orderBy, x.fields)
    } 
  });
});