ng-repeat意外地表现，并且ng-true-value和ng-false-value不起作用

Question

HTML

<div class="form-inline col-xs-12"  ng-repeat="c in evnetChannels track by $index">
<label class="control-label col-xs-6">
<input type="checkbox"
     ng-checked="ChannelisChecked(c.channelTypeId)"
     ng-click="ChannelToggleCheckbox(c.channelTypeId)"
     ng-true-value="'Y'" ng-false-value="'N'" >
     {{c.channelTypeName}} {{ChannelisChecked(c.channelTypeId)}}
</label>
<input class="form-control col-xs-6" type="text" ng-show="c.textRequired=='Y'">
</div>

的JavaScript

$scope.ChannelisChecked = function (val) {
        console.log(val);
        var chnl = _.find($scope.formData_EventDescription.eventChannelList, function (channel) {
            return channel.channelTypeId == val;
        });
        if(chnl){
            return chnl.isChecked;
        }
        else {
            return 'N';
        }
    };

$scope.evnetChannels = [{
      "channelTypeId": 1,
      "channelTypeName": "c1",
      "textRequired": "Y",
      "action": "Y"
    },
    {
      "channelTypeId": 2,
      "channelTypeName": "c2",
      "textRequired": "Y"
    },
    {
      "channelTypeId": 3,
      "channelTypeName": "c3",
      "textRequired": "N"
    }];

$scope.formData_EventDescription.eventChannelList = [{
     "channelTypeId": 1,
     "isChecked": "Y"
},
{
     "channelTypeId": 3,
     "isChecked": "Y"
 }];

我有一个最重要的问题，即当显示复选框时，会检查所有复选框，而不是只检查一个复选框。而且当我在加载页面后查看日志时，它会打印出console.log（val）很多次。

任何想法在这里出了什么问题？

Answer 1

问题是ng-checked指令应该返回truthy / falsy值来检查/取消选中复选框。

在您的情况下，您总是返回Y或N，这两者都是真实的，因此始终会选中复选框。

  $scope.ChannelisChecked = function(val) {
    var chnl = _.find($scope.formData_EventDescription.eventChannelList, function(channel) {
      return channel.channelTypeId == val;
    });
    if (chnl) {
      return chnl.isChecked == 'Y';
    } else {
      return false;
    }
  };

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.formData_EventDescription = {};

  $scope.ChannelisChecked = function(val) {
    var chnl = _.find($scope.formData_EventDescription.eventChannelList, function(channel) {
      return channel.channelTypeId == val;
    });
    if (chnl) {
      return chnl.isChecked == 'Y';
    } else {
      return false;
    }
  };


  $scope.evnetChannels = [{
    "channelTypeId": 1,
    "channelTypeName": "c1",
    "textRequired": "Y",
    "action": "Y"
  }, {
    "channelTypeId": 2,
    "channelTypeName": "c2",
    "textRequired": "Y"
  }, {
    "channelTypeId": 3,
    "channelTypeName": "c3",
    "textRequired": "N"
  }];

  $scope.formData_EventDescription.eventChannelList = [{
    "channelTypeId": 1,
    "isChecked": "Y"
  }, {
    "channelTypeId": 3,
    "isChecked": "Y"
  }]
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <div class="form-inline col-xs-12" ng-repeat="c in evnetChannels track by $index">
      <label class="control-label col-xs-6">
        <input type="checkbox" ng-checked="ChannelisChecked(c.channelTypeId)" ng-click="ChannelToggleCheckbox(c.channelTypeId)" ng-true-value="'Y'" ng-false-value="'N'">{{c.channelTypeName}} {{ChannelisChecked(c.channelTypeId)}}
      </label>
      <input class="form-control col-xs-6" type="text" ng-show="c.textRequired=='Y'">
    </div>
  </div>
</div>