Angularjs：Angularjs複選框沒有綁定在控制器內

你好，我有問題，爲什麼我的複選框中的ng模型在控制器內不工作。Angularjs：Angularjs複選框沒有綁定在控制器內

的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，但不知何故消息沒有改變。這裏似乎有什麼錯誤？謝謝

來源

2017-01-11 arnold emzi

看起來你錯過了添加模塊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>

來源

2017-01-11 04:00:49 superUser

消息不會僅更改複選框的布爾值：3當複選框被切換時，當我們更改消息時， –

消息將會改變。使用'ng-change'指令來做到這一點。 – superUser

老兄我欠你的東西謝謝你喲多多:) –

你的代碼檢查條件$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

來源

2017-01-11 04:03:34 user2718281

Angularjs：Angularjs複選框沒有綁定在控制器內

回答

相關問題