Angularjs:Angularjs复选框未绑定到控制器内部_Angularjs

Angularjs:Angularjs复选框未绑定到控制器内部

angularjs

Angularjs:Angularjs复选框未绑定到控制器内部,angularjs,Angularjs,大家好，我有个问题，为什么我的复选框中的ng模型在控制器中不工作 index.html： <body ng-controller="MainCtrl"> <legend>UI</legend> <div> <input type="checkbox" ng-model="checkbox" /> </div> {{checkbox}} {{message}} <p

大家好，我有个问题，为什么我的复选框中的ng模型在控制器中不工作

index.html：

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

{{checkbox}}
{{message}}

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

我的目标是在复选框为“更改其布尔值”时更改消息。

但不知何故，在我的index.html中，复选框绑定正在工作。每次单击复选框时，它都会更改为true和false，但不知何故，消息没有更改。这里怎么了？谢谢

看起来您错过了将模块

ng app

添加到视图中，因为没有编译文档，控制器也没有实例化。要在每次切换复选框时更改消息，您需要每次更改消息，您可以使用每次切换复选框时触发的指令

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.checkbox=true；
$scope.message=“你好，世界！”
$scope.onChange=函数（）{
if（$scope.checkbox）{
$scope.message=“你好，世界！”；
}否则{
$scope.message=“不是Hello World！”；
}
}
});

用户界面
{{checkbox}}
{{message}
看起来您没有将模块ng app添加到视图中，因此文档没有编译，控制器没有实例化。
要在每次切换复选框时更改消息，您需要每次更改消息，您可以使用每次切换复选框时触发的指令

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.checkbox=true；
$scope.message=“你好，世界！”
$scope.onChange=函数（）{
if（$scope.checkbox）{
$scope.message=“你好，世界！”；
}否则{
$scope.message=“不是Hello World！”；
}
}
});

用户界面
{{checkbox}}
{{message}
检查条件的代码$scope.checkbox
仅在创建控制器时执行一次，因此消息
永远不会更改。你可以这样做
及
请参阅检查条件的代码。创建控制器时，复选框只执行一次，因此消息
永远不会更改。你可以这样做
及
请参见
消息不仅更改复选框的布尔值：3当我们在切换复选框时更改消息时，消息将更改。使用ng change
指令执行此操作。没问题。很高兴我能提供帮助：）消息没有改变，只是复选框的布尔值：3当我们在切换复选框时更改消息时，消息会改变。使用ng change指令执行此操作。没问题。很高兴我能帮忙：）
<pre>
  checkbox = {{checkbox}}
  checkbox?'hello world!':'Not Hello World!' = {{checkbox?'hello world!':'Not Hello World!'}}  
</pre>

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