角：計數項相匹配的條件

我有此數組項角：計數項相匹配的條件

[ 
    { 
    name: 'Foo', 
    completed: false 
    }, 
    { 
    name: 'Ninja', 
    completed: true 
    }, 
    { 
    name: 'Hello', 
    completed: true 
    }, 
    { 
    name: 'Baby', 
    completed: false 
    }, 
]

的我想要顯示的計數，其中完成了在我的視圖=真。當元素從完成= false變爲真時，我還需要此計數器自動更新。有沒有辦法做到這一點在角？

來源

2014-09-23 MonsieurNinja

您可以採取多種方法，但都是先緩存控制器加載時完成的項目數。

您可以使用$watch函數來監視數組，並在對象更改時更新計數器。以下是未經測試，但應該給你怎麼辦呢

function myCtl($scope, itemFetcher) { 
    $scope.items = itemFetcher.get(); //retrieves your array of items 
    $scope.numComplete = countComplete(); 

    $scope.$watch("items", function(newValue, oldValue) { 
    $scope.items = newValue; 
    $scope.numComplete = countComplete(); 
    }, true); // NOTE: passing true into $watch is necessary to do a deep compare (i.e. comparing object properties), and I think it is required in this case, but it has a negative impact on performance & memory. 

    function countComplete() { 
    var cnt = 0; 
    angular.forEach($scope.items, function(item) { 
     cnt += item.completed ? 1 : 0; 
    } 
    return cnt; 
    } 
}

或者，您可以更新在修改完成狀態的項目功能完成計數感。以下代碼也未經測試。

function myCtl($scope, itemFetcher) { 
    $scope.items = itemFetcher.get(); //retrieves your array of items 
    $scope.numComplete = countComplete(); 

    $scope.markItem = function(index, newState) { // this function is referenced in your HTML template 
    $scope.items[index].complete = newState; 
    $scope.numComplete += (newState) ? 1 : -1; 
    } 

    function countComplete() { 
    var cnt = 0; 
    angular.forEach($scope.items, function(item) { 
     cnt += item.completed ? 1 : 0; 
    } 
    return cnt; 
    } 
}

使用$watch更方便和更不易出錯，但可能會導致依賴於items陣列的大小的性能問題。第二種方法更高效，但更難維護。

來源

2014-09-23 13:06:20 Jason

您應該查看過濾器並使用它來動態地過濾您的數組; 在您的控制器聲明你的過濾器這樣

$scope.completedFilter(object) { 
    return object.completed === true; 
}

後在你的模板，你可以再補充

{{(myArray | filter:completedFilter).length}}

而且你數將與完成

注意自動改變：你也可以在你的模塊中聲明一個過濾器，如果你想在另一個控制器中重用它，可能是正確的

來源

2014-09-23 13:13:32

想法不錯，但我敢打賭，過濾方法與使用$ watch的大型數組項目具有相同的性能影響。這一切都取決於如何實現過濾器，我的猜測是它依賴於angular.equals這是一個潛在的性能殺手。 – Jason 2014-09-23 13:18:49

添加$ watch必需y？

嘗試這種方式

$scope.itemCount = function() { 
    var cnt = 0; 
    angular.forEach($scope.items, function (item) { 
     cnt += item.completed ? 1 : 0; 
     console.log(item); 
    }); 
    return cnt; 
}

只是爲了檢查計數得到更新我添加了一個項目上的按鈕，點擊物品數組

$scope.insertItem = function() { 
    $scope.items.push({ name: 'Phani', completed: true }); 

} 
{{itemCount()}} 

    <input type="button" ng-click="insertItem()" value="Insert" />

試試上面的方法

來源

2014-09-23 13:28:52 user804401

角：計數項相匹配的條件

回答

相關問題