2017-04-19 60 views
0

我已经尝试了很多这个问题的答案,但没有任何工作。

的错误:眼下当加总的数据项符合要求的项目,该项目从列表中删除,但名单没有刷新与在选择下拉菜单或子列表中删除该项目的视图。

我认为有一些具体的事情我的代码,所以我在这里重建我的功能:

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>

+0

有什么问题?当您在下拉列表中进行更改时,列表无法正确显示? – Pradeepb

+0

当我进行更改(从数组中删除项目)时,下拉选项和列表在视图中不会更新。 – pixeloft

回答

0

我想通了这一点自己。在$ scope更改以更新列表后,我需要再次调用列表筛选器。以下是更新后的代码:

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>