javascript - ng-repeat行为异常，并且ng-true-value和ng-false-value无法正常工作

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）。

任何想法出什么问题了吗？

最佳答案

问题是ng-checked指令应返回真实/错误值以选中/取消选中该复选框。

在您的情况下，您总是返回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>

关于javascript - ng-repeat行为异常，并且ng-true-value和ng-false-value无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35906951/