0

表示しているアイテムのリストがあり、ユーザーにリストからそれらのいずれかを削除してもらいたい (チェックボックスと削除ボタンを使用)。アイテムを選択してボタンから関数を呼び出すと、アイテムにアクセスできますが (テキストなどを変更します)、ng-show にバインドされた対応するブール値を false に設定しても機能しないようです。$scope.$apply() を試すことを提案した人もいますが、これはエラーを引き起こしています. とにかく、何が起こっているかの簡略化されたバージョン。

angular.module('myApp', ['ngSanitize'])
.controller("itemController", ['$scope','$location',function($scope,$location) {

$scope.items = [];
$scope.to_hide = [];

for ( var i = 0; i < 10; i++) {
    var id = i;
    var title = "Some Title";
    var is_visible = true;

    var item = { "id" : id,
                 "title" : title,
                 "visible" : is_visible }

    $scope.items.push_back(item);
}

$scope.toggleSelection = function(item) {
    $scope.to_hide.push(item.id);   
}

$scope.handleDelete = function(item) {
    for (var i = 0; i < $scope.items.length; i++) {
        if ($scope.to_hide.indexOf($scope.items[i].id) > -1) {
            # Can directly edit item here -- but visibility stays the same 
            $scope.items[i].visible = false;
        }
    }

    $scope.$apply(); // This gives errors.
};

})];

HTML

<div ng-app="myApp" ng-controller="itemController">
    <div ng-repeat="item in items" ng-show="{{item.visible}}>
        <input type="checkbox" ng-click="toggleSelection(item)">
    </div>
    <div>
        <div>{{item.title}}</div>
    </div>
</div>
4

1 に答える 1

3

ng-show や ng-hide などの属性でその補間は必要ありません。また、アイテム自体を送信する代わりに、アイテム インデックスを送信し、それに応じてコントローラーでアクセスする必要があると思います。

だから、ここにあなたができる方法があります。HTML を次のように更新します。

    <div ng-app="myApp" ng-controller="itemController">
        <div ng-repeat="item in items" ng-show="item.visible>               <input type="checkbox" ng-click="toggleSelection($index)">
        </div>
        <div>
            <div>{{item.title}}</div>
        </div>
    </div>

そしてJSで：

    $scope.handleDelete = function(item) {
        $scope.items[$index].visible = false;
    };
于 2015-04-13T03:21:07.817 に答える