角度$ scope在视图中未更新

Question

I have tried so many answers to this question, but nothing works. 对于这个问题，我已经尝试了很多答案，但是没有任何效果。

The bug : Right now when the total data items added meets the item requirement, the item is removed from the list, but the list isn't refreshing the view with the item removed in the select dropdown or child list. 错误：现在，当添加的总数据项满足项目要求时，该项目将从列表中删除，但是该列表并未刷新在选择下拉列表或子列表中删除该项目的视图。

I assume there is something specific to my code, so I've recreated my functionality here: 我假设我的代码有一些特定的东西，所以我在这里重新创建了功能：

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, filterFilter) { Array.prototype.sum = function(prop) { var ptotal = 0 for (var i = 0, _len = this.length; i < _len; i++) { ptotal += this[i][prop] } return ptotal } $scope.owners = [{ "id": "1", "name": "parent 1" }, { "id": "2", "name": "parent 2" }]; $scope.children = [{ "id": "1", "total": "2", "owner": "1", "name": "child 1" }, { "id": "2", "total": "2", "owner": "2", "name": "child 2" }, { "id": "3", "total": "1", "owner": "2", "name": "child 3" }]; var random = Math.floor(Math.random() * $scope.owners.length); $scope.selectedOwner = $scope.owners[random]; $scope.childrenList = $scope.children.filter(function(x) { return x.owner == $scope.selectedOwner.id; }); $scope.remove = function(child) { } $scope.ownerChange = function(owner) { $scope.selectedOwner = owner; $scope.childrenList = $scope.children.filter(function(x) { return owner.id == $scope.selectedOwner.id; }); } $scope.data = []; $scope.add = function(child) { $scope.totalInit = filterFilter($scope.children, { id: child.id }); var total = $scope.totalInit.sum("number"); var complete = filterFilter($scope.data, { id: +child.id }).length; var number = +complete + 1; var input = { "id": child.id, "name": child.name, "number": number }; if (+number >= +child.total) { $scope.children = $scope.children.filter(function(x) { return x.id != child.id; }); $scope.ownerStatus = filterFilter($scope.data, { id: child.id }).length; if ($scope.ownerStatus === 0) { $scope.owners = $scope.owners.filter(function(x) { return x.id != child.owner; }); } } $scope.data.push(input); }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>Test</title> </head> <body ng-controller="MainCtrl"> <p><b>The bug:</b> Right now when the total data items added meets the item requirement, the item is removed from the list, but the list isn't refreshing the view with the item removed in the select dropdown or child list.</p> <p>---------------------------------------------------------</p> <b>Select Owner:</b> <select ng-options="o.name for o in owners track by o.id" ng-model="selectedOwner" ng-change="ownerChange(selectedOwner)"> </select> <ul> <li ng-repeat="c in childrenList">{{c.name}} <button ng-click="add(c)">Add</button> </li> </ul> <b>Data:</b> <ul> <li ng-repeat="d in data">{{d.name}} <button ng-click="data.splice($index, 1)">Remove</button> </li> </ul> </body> </html>

Answer 1

I just figured this out myself. 我只是自己弄清楚了。 I needed to call the list filter again after the $scope change to update the lists. $ scope更改后，我需要再次调用列表过滤器以更新列表。 Here is the updated code: 这是更新的代码：

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, filterFilter, $timeout) { Array.prototype.sum = function(prop) { var ptotal = 0 for (var i = 0, _len = this.length; i < _len; i++) { ptotal += this[i][prop] } return ptotal } $scope.owners = [{ "id": "1", "name": "parent 1" }, { "id": "2", "name": "parent 2" }, { "id": "3", "name": "parent 3" }]; $scope.children = [{ "id": "1", "total": "2", "owner": "1", "name": "child 1" }, { "id": "2", "total": "2", "owner": "2", "name": "child 2" }, { "id": "3", "total": "1", "owner": "2", "name": "child 3" }, { "id": "4", "total": "5", "owner": "3", "name": "child 4" }, { "id": "5", "total": "2", "owner": "1", "name": "child 5" }]; // var uTotal = $scope.children.sum("total"); var random = Math.floor(Math.random() * $scope.owners.length); $scope.selectedOwner = $scope.owners[random]; $scope.childrenList = $scope.children.filter(function(x) { return x.owner == $scope.selectedOwner.id; }); $scope.ownerChange = function(owner) { $scope.selectedOwner = owner; $scope.childrenList = $scope.children.filter(function(x) { return x.owner == $scope.selectedOwner.id; }); } $scope.data = []; $scope.remove = function(child) { for (var i3 = $scope.data.length - 1; i3 >= 0; i3--) { if ($scope.data[i3].number == child.number && $scope.data[i3].id == child.id) { $scope.data.splice(i3, 1); } } } $scope.add = function(child) { $scope.totalInit = filterFilter($scope.children, { owner: child.owner }); var total = $scope.totalInit.sum("total"); var complete = filterFilter($scope.data, { id: +child.id }).length; var number = +complete + 1; var input = { "id": child.id, "name": child.name, "number": number }; if (+number == +child.total) { $scope.data.push(input); for (var i = $scope.children.length - 1; i >= 0; i--) { if ($scope.children[i].id == child.id) { $scope.children.splice(i, 1); } } $scope.childrenList = $scope.children.filter(function(x) { return x.owner == $scope.selectedOwner.id; }); $scope.ownerStatus = filterFilter($scope.children, { owner: child.owner }).length; if ($scope.ownerStatus === 0) { for (var i2 = $scope.owners.length - 1; i2 >= 0; i2--) { if ($scope.owners[i2].id == child.owner) { $scope.owners.splice(i2, 1); } } var random2 = Math.floor(Math.random() * $scope.owners.length); $scope.selectedOwner = $scope.owners[random2]; $scope.childrenList = $scope.children.filter(function(x) { return x.owner == $scope.selectedOwner.id; }); if ($scope.owners.length === 0) { alert("All Trials Complete"); $scope.children = []; $scope.owners = []; } } } else { $scope.data.push(input); } }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>Test</title> </head> <body ng-controller="MainCtrl"> <b>Select Owner:</b> <select ng-options="o.name for o in owners track by o.id" ng-model="selectedOwner" ng-change="ownerChange(selectedOwner)"> </select> <ul> <li ng-repeat="c in childrenList track by c.id">{{c.name}} <button ng-click="add(c)">Add</button> </li> </ul> <b>Data:</b> <ul> <li ng-repeat="d in data track by $index">{{d.name}} <button ng-click="remove(d, $index)">Remove</button> </li> </ul> </body> </html>

角度$ scope在视图中未更新

问题描述

1 个解决方案

解决方案1
0 2017-04-20 02:08:11

角度$ scope在视图中未更新

问题描述

1 个解决方案

解决方案1 0 2017-04-20 02:08:11

解决方案1
0 2017-04-20 02:08:11