我有一个包含以下项目的数组:
{
key : 'abc',
color: 'Red',
show: true
}
<div ng-repeat="x in myArray">
<input type="checkbox" ng-model="x" ng-change="changeShow($index)" checked="checked" />
<div style="background-color:{{x.color}}; width: 5px;" class="left"> </div>
<label>{{x.key}}</label>
{{x}}
</div>
$scope.changeShow = function (index) {
$scope.myArray[index].show = !$scope.myArray[index].show;
}
问题是，当我单击任何 chekcbox 时，{{x}} 仅呈现 true/false，而 颜色和名称消失。为什么？？
最佳答案
将复选框绑定(bind)到 x.show 而不是 x
您可以删除
ng-change="changeShow"位，因为 Angular 将更新显示属性
请参阅下面的演示
var app = angular.module('app', []);
angular.module('app').controller('homeCtrl', homeCtrl);
homeCtrl.inject = ['$scope']
function homeCtrl($scope) {
$scope.myArray = [{
key: 'abc',
color: 'Red',
show: true
}]
};<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="homeCtrl">
<div ng-repeat="x in myArray">
<input type="checkbox" ng-model="x.show" checked="checked" />
<div style="background-color:{{x.color}}; width: 5px;" class="left"> </div>
<label>{{x.key}}</label>
{{x}}
</div>
</body>
</html>关于javascript - AngularJS 复选框和 ng-change 的工作方式非常奇怪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29699668/