stackoom
  简体   繁体   中英

Angular $scope not updating in view

 原文  2017-04-19 18:26:04  7   1    javascript/ angularjs/ arrays/ json/ ionic-framework

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>

1 answers

solution1
 0  2017-04-20 02:08:11

I just figured this out myself. I needed to call the list filter again after the $scope change to update the lists. 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular $scope object not updating in view angular: updating view when input changes + .this/$scope Angular view not updating on scope change after form submit in ngDialog Angular View {{ var }} updating, but $scope.var doesn't change? $scope variable not updating in view Angular $scope variable not updating angular's $scope not updating? Angular $scope not updating in function Angular scope not updating Angularjs $scope variables not updating in view
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM