Question

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

index.html：

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!";
 }
 });

my script.js：

{{1}}

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

Answer 1

您似乎错过了向视图添加模块ng-app，因为文档未被编译，Controller未实例化。要在每次切换复选框时更改消息，您需要每次更改消息，您可以使用ng-change指令，每次复选框都会触发该指令。

＆＃13;

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!";
    }
  }
});

＆＃13;

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

＆＃13;

Answer 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

Angularjs：Angularjs复选框在控制器内部没有绑定

2 个答案: