AngularJS ng-show(不随布尔值变化)
AngularJS ng-show (not changing with boolean value)
我有一个正在显示的项目列表,并希望用户从列表中删除其中的任何项目(通过复选框和删除按钮)。当我 select 项并从按钮调用函数时,我可以访问这些项(更改它们的文本等等)但是将它们对应的绑定到 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>
您不需要在 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;
};
我有一个正在显示的项目列表,并希望用户从列表中删除其中的任何项目(通过复选框和删除按钮)。当我 select 项并从按钮调用函数时,我可以访问这些项(更改它们的文本等等)但是将它们对应的绑定到 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>
您不需要在 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;
};