Angular JS，過濾時記得複選框狀態

我正在嘗試使用複選框和搜索框創建列表。Angular JS，過濾時記得複選框狀態

HTML

<div ng-controller="MainCtrl"> 
    <input type="text" placeholder="Search" ng-model="query"> 
    <div ng-repeat="item in items | filter:query"> 
     <input type="checkbox" id="{{item.id}}" value="{{item.id}}">{{item.name}} 
    </div> 
    </div>

myApp.controller('MainCtrl', function ($scope) { 
    $scope.items = [ 
    { 
     "id": 1, 
     "name": "Green", 
    }, 
    { 
     "id": 2, 
     "name": "Yellow", 
    }, 
    { 
     "id": 3, 
     "name": "Blue", 
    }, 
    { 
     "id": 4, 
     "name": "Red", 
    } 
    ]; 
});

的問題是，當我通過搜索框進行搜索複選框的狀態不會被保存。例如，當我檢查「綠色」時，我在文本框上鍵入其他內容，然後刪除此文本，選中的「綠色」不再被選中。我怎樣纔能有複選框狀態的「記憶」？

這裏是plunker鏈接：http://plnkr.co/edit/KHq3AA4guGKA4AqxQrF8

來源

2015-05-04 MatthewK

我會建議你在你的items陣列添加更多的特性每個item，這將是可訪問的item.checked

標記

<div ng-controller="MainCtrl"> 
    <input type="text" placeholder="Search" ng-model="query"> 
    <div ng-repeat="item in items | filter:query"> 
     <input type="checkbox" ng-model="item.checked">{{item.name}} 
    </div> 
    </div>

Working Plunkr

來源

2015-05-04 19:33:27

謝謝......這很容易！ – MatthewK

很高興幫助你..謝謝:) –

@PankajParkar你可以看看我的問題嗎？出於某種原因，當我檢查一個框時，我無法將值附加到我的'ng-model'上，出現以下錯誤 - TypeError：無法分配給只讀屬性'entityChecked'。這裏是我的問題，如果你有時間 - http://stackoverflow.com/questions/35276014/checkbox-unchecking-itself-after-angularjs-filter-applied – xeon48

連接ng-model="item.checked"到複選框，如：

<input type="checkbox" ng-model="item.checked" id="{{item.id}}" value="{{item.id}}">{{item.name}}

看到這個plunker

來源

2015-05-04 19:32:52

我標記爲正確答案的第一個，感謝您的時間。 – MatthewK

Angular JS，過濾時記得複選框狀態

回答

相關問題