2013-05-17 26 views
67

我在提出這個問題之前提到了這個。AngularJS:ng-model不能綁定到ng檢查複選框

AngularJs doesn't bind ng-checked with ng-model

如果ng-checked進行評估,以truehtml方面,ng-model不更新。我不能在上面的問題中建議ng-repeat,因爲我必須爲每個複選框使用一些樣式。

這裏是我創建的闖入者來說明我的問題。

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

要看到我想要的東西,請打開控制檯,只要按一下按鈕Submit。請不要檢查任何複選框。

在此先感謝!

回答

107

ngModelngChecked並不意味着一起使用。

ngChecked正在等待一個表達式,所以通過說ng-checked="true",你基本上說這個複選框默認會被選中。

您應該只能使用ngModel,綁定到模型上的布爾屬性。如果你想要別的東西,那麼你需要使用ngTrueValuengFalseValue(它現在只支持字符串),或者編寫你自己的指令。

你究竟想要做什麼?如果您只是希望默認選中第一個複選框,則應該更改模型 - item1: true,

編輯:您不必提交表單來調試模型的當前狀態,順便說一句,您可以將{{testModel}}轉儲到您的HTML(或<pre>{{testModel|json}}</pre>)中。您的ngModel屬性也可以簡化爲ng-model="testModel.item1"

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

+0

'NG-checked'被計算爲真正的表達。爲了表明'ng-model'沒有鏈接,我在那裏用到了。在啓動控制器的同時,我希望所有的複選框不被選中。經過一些Ajax請求後,我計算'ng-checked'來檢查複選框。這是當我的'ng模型'不更新。 – Abilash

+5

@Abilash你不應該使用'ngChecked'。你的模型很好,你只需要在你的ajax回調中設置'testModel.item1 = true',然後調用'$ scope。$ apply()'來更新你的視圖。 – Langdon

+2

我們只是犯了使用'ng-checked'而不是'ng-model'的錯誤......永遠不會! – g00glen00b

1

你可以做的是使用ng-repeat傳入無論您正在迭代到ng-checked的價值,還是利用ng-class根據結果應用您的樣式。

我最近做了類似的事情,它爲我工作。

1

可以宣佈由於在NG-INIT也越來越真實

<!doctype html> 
<html ng-app="plunker" > 
    <head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> 
    <script src="app.js"></script> 
    </head> 
    <body ng-controller="MainCtrl" ng-init="testModel['item1']= true"> 
    <label><input type="checkbox" name="test" ng-model="testModel['item1']" /> Testing</label><br /> 
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br /> 
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br /> 
    <input type="button" ng-click="submit()" value="Submit" /> 
    </body> 
</html> 

,您可以選擇的第一個對象,並在此同時標出真,假,FLASE