Angularjs：Angularjs 复选框未绑定在控制器内答案

【问题标题】：Angularjs : Angularjs checkbox is not binding inside the controllerAngularjs：Angularjs 复选框未绑定在控制器内
【发布时间】：2017-01-11 12:09:46
【问题描述】：

大家好，我有一个问题，为什么我的复选框中的 ng-model 在控制器中不起作用。

index.html：

    <body ng-controller="MainCtrl">
      <legend>UI</legend>
      <div>
      <input type="checkbox" ng-model="checkbox" />
    </div>

{{checkbox}}
{{message}}

我的 script.js：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 $scope.checkbox = true;
 if($scope.checkbox) {
   $scope.message = "hello world!";
 } else {
   $scope.message = "Not Hello World!";
 }
 });

我的目标是在复选框更改其布尔值时更改消息。但不知何故，在我的 index.html 中，复选框绑定正在工作，每次我单击复选框时它都会变为 true 和 false，但不知何故消息并没有改变。这里似乎有什么问题？谢谢

【问题讨论】：

标签： angularjs

【解决方案1】：

看起来您错过了将模块 ng-app 添加到视图中，因此文档没有被编译，控制器没有被实例化。对于每次切换复选框时都会更改消息，您需要每次更改消息，您可以使用ng-change指令，该指令在每次切换复选框时触发。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.checkbox = true;
  $scope.message = "hello world!"
  $scope.onChange = function() {
    if ($scope.checkbox) {
      $scope.message = "hello world!";
    } else {
      $scope.message = "Not Hello World!";
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <legend>UI</legend>
  <div>
    <input ng-change="onChange(checkbox)" type="checkbox" ng-model="checkbox" />
  </div>
  <p>{{checkbox}}</p>

  <p>{{message}}</p>

【讨论】：

消息不仅改变了复选框的布尔值：3
当我们在复选框被切换时更改消息时，消息将发生变化。使用ng-change 指令来做到这一点。
没问题。很高兴我能帮忙:)

【解决方案2】：

检查条件$scope.checkbox 的代码仅在创建控制器时执行一次，因此message 永远不会改变。你可以这样做

<pre>
  checkbox = {{checkbox}}
  checkbox?'hello world!':'Not Hello World!' = {{checkbox?'hello world!':'Not Hello World!'}}  
</pre>

或者如果您需要将其绑定到模型，请创建一个函数，在更改复选框时调用ng-change：

<input type="checkbox" ng-model="checkbox" ng-change="onChange(checkbox)"/>

和

  $scope.onChange = function(checkbox) {
     if(checkbox) {
       $scope.message = "hello world!";
     } else {
       $scope.message = "Not Hello World!";
     }    
  }

见plunker

【讨论】：