3

我有一个过滤的对象列表，使用 ng-repeat 重复，每个项目旁边都有一个输入复选框。当列表未过滤时（就像加载页面时一样），我不希望选中复选框。如果列表被过滤，我确实希望选中复选框（复选框通过 CSS 形成树视图）。

该复选框具有 ng-checked="{{site.isChecked}}"。当列表被过滤时，我正在更新过滤器 javascript 代码中对象的 isChecked 变量，但这不会更新复选框值。如果该项目被过滤掉，因此它从屏幕中删除，然后再次过滤回来，更新后的 isChecked 值将进入屏幕。

HTML如下：

<ul>
    <li ng-repeat="site in sites | filterSites:searchBuildings">
        <input type="checkbox" ng-checked="{{site.isChecked}}" id="item-f{{site.id}}" /><label for="item-f{{site.id}}">{{site.site}}</label>
        <ul>
            <li ng-repeat="building in site.filteredBuildings">
                <a href="#" ng-click="getBuilding(building)">{{building.address}}</a>
            </li>
        </ul>
    </li> </ul>

JS是：

var filtered = [];
searchBuildings = searchBuildings.toLowerCase();
angular.forEach(sites, function (site) {
    var added = false;
    var siteMatch = false;
    site.isChecked = true;
    if (site.site.toLowerCase().indexOf(searchBuildings) !== -1)
        siteMatch = true;
    angular.forEach(site.buildings, function (building) {
        if (siteMatch == true || building.search.toLowerCase().indexOf(searchBuildings) !== -1) {
            if (added == false) {
                added = true;
                filtered.push(site);
                site.filteredBuildings = [];
            }
            site.filteredBuildings.push(building);
        }
    });
});
return filtered;

抱歉，如果代码不是很漂亮 - 我是 AngularJS 和 JS 的新手，并且仍在尝试弄清楚事物是如何联系在一起的。

谢谢

4

1 回答 1

4

您应该使用ng-model那里可以为您提供两种方式的绑定。检查和取消选中该值将更新site.isChecked

<input type="checkbox" ng-model="site.isChecked" id="item-f{{site.id}}"/>
于 2015-07-14T14:26:55.973 回答