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

角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

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


解决方案

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

  $范围。$ watchGroup(['vm.orderOptions [0] .value的','vm.orderOptions [1] .value的','vm.orderOptions [2] .value的'],函数(){  vm.orderBy = []; //< =  - 清/重置阵列  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