指示以角度选中的复选框答案

【问题标题】：Indicate checkbox checked in angular指示以角度选中的复选框
【发布时间】：2015-03-07 18:19:16
【问题描述】：

我把我认为是一个非常简单的例子放在一起，说明我如何从一个以角度检查的复选框触发一个函数，并让该函数检查以查看复选框的新值并相应地显示或不显示一个消息。它有效，但只有在我至少选中并取消选中该框一次之后。出于这个原因，我认为我只需要将复选框值默认为 false 并且可以解决问题，但它没有。任何人都可以帮我调整它以使其正常工作，如果是这样，也许可以解释为什么我的想法有缺陷，我对 $scopes 状态有什么不明白的地方。顺便说一句，它也被翻转了，这意味着当我选中该框时，消息就会消失，而当我取消选中它时，它会说它已被选中。

我正在做这些练习以更好地了解 Angular 的工作原理，并且我深知这是一个 javascript 问题，但我仍然没有弄清楚。任何帮助表示赞赏

app.js

  var formApp = angular

  .module('formApp', [])
  .controller('formController', function($scope) {

  $scope.formData = {};

  $scope.redCheckFunction = function() {
    if ($scope.formData.favoriteColors.red == true){
      $scope.redMessage = "red is checked";
    } else {
      $scope.redMessage = "";
    }
  };

});

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="app.js"></script>
</head>

<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
  <div>
  <h2>Angular Checkboxes</h2>
  <form>
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" name="name" 
            ng-model="formData.name">
      <label>Description</label>
      <input type="text" class="form-control" name="description" 
            ng-model="formData.description">
    </div>

    <!-- MULTIPLE CHECKBOXES -->
    <label>Favorite Colors</label>
    <div class="form-group">
      <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" 
            ng-model="formData.favoriteColors.red" 
            ng-init="favoriteColors.red.disabled=false" 
            ng-click="redCheckFunction()"> Red
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" 
            ng-model="formData.favoriteColors.blue"> Blue
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" 
            ng-model="formData.favoriteColors.green"> Green
      </label>
    </div>

    <button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
    <h2>{{redMessage}}</h2>
  </form>

  <h2>Sample Form Object</h2>
  <pre>
    {{ formData }}
  </pre>

</div>
</body>
</html>

我创造了一支笔来让事情变得更简单： Checkbox Pen

【问题讨论】：

可能你必须使用ng-value-true和ng-value-false
嗨，Avraam，我确实尝试过。虽然这是创建默认值的好方法，但我的问题是我使用的是 ng-click 而不是 ng-change。但是在这个问题中，我已经了解了ng-value-* 和ng-change，尽管ng-value-* 对这个特殊问题没有帮助，但我仍然得到了两者的信息。感谢您的评论！我感谢任何试图提供帮助的人！

标签： javascript html angularjs forms

【解决方案1】：

ng-click is fired before the model is updated:

请注意，ngClick 事件将在模型更新之前发生。

您需要使用 ng-change 指令：

当用户改变输入时计算给定的表达式。

http://codepen.io/anon/pen/azaJob

 <label>Favorite Colors</label>
        <div class="form-group">
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red" ng-init="formData.favoriteColors.red.disabled=false" ng-change="redCheckFunction()"> Red
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
            </label>
        </div>

当您输入函数redCheckFunction 时，该值已更新。

【讨论】：

我认为是这样，但不知道更改指令，让我使用它，我会在一分钟内更新。
我添加了评论和链接：在模型更新之前触发了ng-click，
是的，我明白了，非常感谢您花时间回答问题并帮助我！现在完美运行，我正在学习！