Question

我有一个包含以下项目的数组：

{ 
   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">&nbsp;</div>
    <label>{{x.key}}</label>
    {{x}}
</div>

$scope.changeShow = function (index) {
    $scope.myArray[index].show = !$scope.myArray[index].show;
}

问题是，当我点击任意复选框时，{{x}}仅呈现true / false，color和name消失。为什么??

Answer 1

将您的复选框绑定到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">&nbsp;</div>
    <label>{{x.key}}</label>
    {{x}}
  </div>
</body>

</html>

Answer 2

你需要将x.show绑定到ng-checked并将ng-change更改为ng-click，如果你想要做的就是翻转show的值。你不需要ng-model。

<input type="checkbox" ng-checked="x.show" ng-click="changeShow($index)" />

Plunker Demo

AngularJS复选框＆amp; ng-change非常奇怪

2 个答案: