问题描述
我有我使用了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
< DIV CLASS =行>
< DIV CLASS =COL-XS-12>
< DIV CLASS =面板体P-XXS>
< DIV CLASS =行>
< DIV CLASS =COL-XS-12>
< DIV 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>
< DIV CLASS =面板体P-XS M-T-SM溢出吴式=resizeWithOffset(300)调整>
< DIV CLASS =面板体P-XXS
NG-重复=在mapSidebarCtrl.territorySubdivisions细分|排序依据:mapSidebarCtrl.orderBy>
<一个NG点击=mapSidebarCtrl.selectSubdivision(subdivision.properties.id);>
< DIV CLASS =行>
< DIV CLASS =COL-XS-12>
< DIV CLASS =右拉文本的权利>
&所述; IMG SRC =https://placeimg.com/75/75/any>
< / DIV>
&所述; H5类=M-B-XS>&下;跨度> {{subdivision.properties.name}}&下; /跨度>&下; / H5>
&所述;股利类=M-B-XS>&下;跨度> {{subdivision.properties.status}}&下; /跨度>&下; / DIV>
< DIV 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不一致拿起模式的变革的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!