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 に答える