ng-checked 没有第一次更新答案

【问题标题】：ng-checked not updating first timeng-checked 没有第一次更新
【发布时间】：2016-10-30 17:37:04
【问题描述】：

我正在使用 ng-repeat 生成复选框，它们的初始状态可以选中或取消选中，具体取决于数据中是否存在该信息。我的问题是尽管它正确显示了它们的初始选中/未选中状态，但当我取消选中已“预先选中”的框时，该框实际上取消选中但模型没有改变。然后我再次检查，模型没有改变但它是正确的。然后我再次取消选中，它在模型中正确清除并从那时起正常工作。我已经解决这个问题好几天了，我完全被困住了！任何人都可以看到我是否在做一些愚蠢的事情？我的感觉是这是一个初始化问题，但我离它太近了，现在看不到。谢谢！

<!-- if this is a checkbox to be drawn -->
<div ng-if="option.option_type=='checkbox'">
  <label class="item-checkbox-right">
  {{option.caption}} 
   <!-- handle multiple options -->

  <!-- if answered_options[n]weight exists, make option.ans = weight --></label>
  <ul ng-repeat="opti in questionpart.survey_answer[0].answered_options">
    <li style="list-style: none; display: inline">

    <!-- if option is set in the received data, set it in the model -->
      <div ng-if="opti.id == option.id">
        <div ng-init="option.ans = option.weight"></div>
      </div>
    </li>
  </ul>
  <label class="item-checkbox-right">
      <!-- show the checkbox and bind to option.ans-->
      <input class="checkbox-light" 
      type="checkbox" 
      name="{{questionpart.id}}" 
      ng-false-value="0" 
      ng-true-value="{{option.weight}}"
      ng-model="option.ans"
      ng-checked="option.ans==option.weight" />
  </label>
</div>

【问题讨论】：

可能初始值会计算为 ng-false-value 或 ng-true-value，然后当您按下复选框时，角度会将值转换为 false 和 true。您可以通过打印 {{option.ans}} 来检查这一点。我有一个类似的问题，我的解决方案是在一个函数中添加解析并使用 ng-click 复选框调用它。希望有更简单的解决方案，但至少现在您知道问题的原因可能是什么。
谢谢 - 我尝试输出 option.ans 模型，但它显示了正确的值，除非第一次未选中该框，并且它没有改变。我将尝试通过函数和 ng-click 进行解析。还有其他想法吗？ :-)
哎呀，我不能做我想做的事情，因为检查角度复选框状态的方法是通过模型。这太令人沮丧了！
是的，我知道，如果你明天还没有找到解决方案，我可以创建一个 plnkr 并展示给你我的，它不漂亮，但它有效。 :P
谢谢！将不胜感激！

标签： angularjs checkbox ionic-framework angular-ngmodel angularjs-ng-checked

【解决方案1】：

这是一个简单但不漂亮的example。为复选框使用默认的 Angular 指令对我来说从来没有用过。

app.js

$scope.data = [{checkboxValue: 0}, {checkboxValue: 1}, {checkboxValue: 2}];
$scope.dataCopy = angular.copy( $scope.data );

$scope.setCheckboxValue = function( checkbox, index ) {
    checkbox.checkboxValue = checkbox.checkbox ? $scope.dataCopy[index].checkboxValue : 0;
}

$scope.parseCheckboxes = function() {
    for( var i = 0, len = $scope.data.length ; i < len ; i++ ) {
        $scope.data[i].checkbox = $scope.data[i].checkboxValue > 0 ? true : false;
    }
}

$scope.parseCheckboxes();

基本上我在控制器上所做的就是自己处理复选框的逻辑。我创建了一个数组的副本，这样当我们从 false 切换到 true 时，我们会得到初始值。

我在每个对象中添加了一个额外的键来跟踪复选框的状态（真或假），因此它不会干扰实际值。

初始标记是通过解析对象数组并根据它们的值将所有复选框设置为真或假来完成的。

html

<body ng-controller="MainCtrl">
    <label ng-repeat="d in data track by $index">
        <input type="checkbox" ng-model="d.checkbox" ng-change="setCheckboxValue(d, $index )" />
        {{d.checkbox}}
        {{d.checkboxValue}} 
        <br>
    </label>
</body>

html 部分很容易解释。

可能有更好的方法来解决这个问题，但这是我想出的解决方案。不漂亮，但很管用。

【讨论】：