角watchgroup不一致拿起模式的变革

角watchgroup不一致拿起模式的变革

关注
发信
关注(28)粉丝(399)

角watchgroup不一致拿起模式的变革

本文介绍了角watchgroup不一致拿起模式的变革的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有我使用了NG-重复一个动态的排序依据的功能。我有这方面的帮助，从另一个岗位。他创造了一个plunker和它的伟大工程。但是当我用项目整合它不按预期工作。我创建了所有refrences相同版本的plunker为好。这里是链接张贴。

我已经把范围缩小到它是什么回事。
在页面加载看到空数组。

下面是当我应用过滤器。

选定的过滤器被应用到阵列。但是没有更改被应用到NG-重复。

下面是删除选定的过滤器之后。通知对象数组改变为正确的值。但在watchgroup功能断点我意识到这是不拾取模型的变化。

在这里，当我重新应用相同的过滤器。在watchgroup拿起模型的变化和applys它排序依据数组这应该是一个空数组。

我已经三重检查，以确保JavaScript的refrences是相同的版本。但我不知道如何解决这个因为plunker可以完美运行？

下面是实际code从我的项目

  mapSidebarCtrl.orderBy = [];    mapSidebarCtrl.orderOptions = [{
        名称：'细分'，
        值：false，
        字段：['properties.name']
    }，{
        名称：'总LOE，
        值：false，
        字段：['metrics.loe.total']
    }，{
        名称：'库存'，
        值：false，
        字段：['metrics.inv.fut'，'metrics.inv.vdl'，'metrics.inv.mod'，'metrics.inv.uc'，'metrics.inv.fin'，'metrics.inv.total' ]
    }];    $范围。$ watchGroup（['mapSidebarCtrl.orderOptions [0] .value的'，'mapSidebarCtrl.orderOptions [1] .value的'，'mapSidebarCtrl.orderOptions [2] .value的']，函数（）{
        angular.forEach（mapSidebarCtrl.orderOptions，功能（X）{
            如果（x.value）{
                [] .push.apply（mapSidebarCtrl.orderBy，x.fields）;
            }
        }）;
    }）;    SelectedTerritoryService.subscribeSelectedTerritorySubdivisions（$范围，功能selectedTerritorySubdivisions（事件参数）{
        mapSidebarCtrl.territorySubdivisions = ARGS
    }）;

HTML 

 ＆LT; D​​IV CLASS =行＆GT;
    ＆LT; D​​IV CLASS =COL-XS-12＆GT;
        ＆LT; D​​IV CLASS =面板体P-XXS＆GT;
            ＆LT; D​​IV CLASS =行＆GT;
                ＆LT; D​​IV CLASS =COL-XS-12＆GT;
                    ＆LT; D​​IV CLASS =BTN-组＆GT;
                        ＆LT;标签类=BTN BTN-默认BTN-XSNG重复=选项mapSidebarCtrl.orderOptionsNG-CLASS ={活跃：option.value}NG点击=option.value =选项！值＆GT;
                            ＆LT; I类=FANG-CLASS ={'FA-排序字母倒序：option.value，FA-排序-α-ASC'：option.value}＆GT;＆LT; / I＆GT ; {{option.name}}
                        ＆LT; /标签＆gt;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =面板体P-XS M-T-SM溢出吴式=resizeWithOffset（300）调整＆GT;
    ＆LT; D​​IV CLASS =面板体P-XXS
         NG-重复=在mapSidebarCtrl.territorySubdivisions细分|排序依据：mapSidebarCtrl.orderBy＆GT;
        ＆LT;一个NG点击=mapSidebarCtrl.selectSubdivision（subdivision.properties.id）;＆GT;
            ＆LT; D​​IV CLASS =行＆GT;
                ＆LT; D​​IV CLASS =COL-XS-12＆GT;
                    ＆LT; D​​IV CLASS =右拉文本的权利＆GT;
                        ＆所述; IMG SRC =htt​​ps://placeimg.com/75/75/any＆GT;
                    ＆LT; / DIV＆GT;
                    ＆所述; H5类=M-B-XS＆GT;＆下;跨度＆GT; {{subdivision.properties.name}}＆下; /跨度＆GT;＆下; / H5＆GT;
                    ＆所述;股利类=M-B-XS＆GT;＆下;跨度＆GT; {{subdivision.properties.status}}＆下; /跨度＆GT;＆下; / DIV＆GT;
                    ＆LT; D​​IV CLASS =徽章＆GT; ＆LT; I类=发发星文警告＆GT;＆LT; / I＆GT; ＆LT; I类=发发星文警告＆GT;＆LT; / I＆GT; ＆LT; I类=发发星文警告＆GT;＆LT; / I＆GT; ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆所述; / A＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; pre＆GT;＆LT; code＆GT; {{mapSidebarCtrl.orderOptions | JSON}}＆LT; / code＆GT;＆LT; / pre＆GT;
    ＆LT; pre＆GT;＆LT; code＆GT; {{mapSidebarCtrl.orderBy | JSON}}＆LT; / code＆GT;＆LT; / pre＆GT;
＆LT; / DIV＆GT;


解决方案

您忘了清除在 $ watchGroup 回调函数的数组。

  $范围。$ watchGroup（['vm.orderOptions [0] .value的'，'vm.orderOptions [1] .value的'，'vm.orderOptions [2] .value的']，函数（）{  vm.orderBy = []; //＆LT; =  - 清/重置阵列  angular.forEach（vm.orderOptions，功能（X）{
    如果（x.value）{
      [.push.apply（vm.orderBy，x.fields）
    }
  }）;
}）;

I have a dynamic orderBy function I am using for a ng-repeat. I had help with this from another post. He created a plunker and it works great. however when I integrated with project it is not working as expected. I created the plunker with the same versions of all refrences as well. here is link to post. link to stackoverflow post

I have narrowed it down to what it is going on.on page load you see the empty array.

here is when i apply the filter.

the selected filter is being applied to the array. however no changes are being applied to the ng-repeat.

here is after removing the selected filter. notice the array of objects changed the to the correct value. but with a breakpoint in the watchgroup function i realized it was not picking up the change in the model.

here is when i reapply the same filter. the watchgroup picks up the model change and applys it the orderBy array which should be a empty array.

I have triple checked to make sure the javascript refrences are the same versions. But I am not sure how to troubleshoot this since the plunker works perfect?

here is the actual code from my project

    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>
解决方案

You forgot to clear the array in the $watchGroup callback function.

$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)
    }
  });
});

这篇关于角watchgroup不一致拿起模式的变革的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-06 05:29
Powered by LMLPHP ©2024 角watchgroup不一致拿起模式的变革 0.040244