2017-04-19 61 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>