【发布时间】:2017-04-19 18:26:04
【问题描述】:
我已经尝试了很多这个问题的答案,但没有任何效果。
错误:现在当添加的数据项总数满足项目要求时,该项目从列表中删除,但列表没有刷新视图,选择中删除的项目下拉列表或子列表。
我假设我的代码有一些特定的东西,所以我在这里重新创建了我的功能:
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>
【问题讨论】:
-
有什么问题?当您在下拉列表中进行更改时,列表未正确显示?
-
当我进行更改(从数组中删除项目)时,下拉选项和列表不会在视图中更新。
标签: javascript angularjs arrays json ionic-framework