AngularJS ng-show(不随布尔值变化)

Question

我有一个正在显示的项目列表，并希望用户从列表中删除其中任何一个（通过复选框和删除按钮）。 当我选择项目并从按钮调用函数时，我可以访问这些项目（更改它们的文本等等），但是将它们绑定到 ng-show 的相应布尔值设置为 false 似乎不起作用。 有些人建议尝试$scope.$apply（），但这给了我错误 - 互联网说它是b/c Angular正在摘要中。 随便谁，正在发生的事情的简化版本。

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>

Answer 1

你不需要在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;
    };