使用AngularJS處理單選框和復選框的簡單方法_AngularJS

創建完成之后，我們就有了具有name輸入的表單了。如果一切都按照我們設想的運行，那么如果你在name輸入中鍵入內容，那么你應當可在下面的

標簽段看到所輸入的內容了.

 

復選框

在表單里，復選框非常普遍。下面我們將看看Angular是怎樣使用ngModel實現數據綁定的。如果有許多復選框，那么有時在把它綁定到對象的時候如何進行數據處理會讓人不知所措。
在我們創建的formData對象的內部，我們還創建了另一個對象。我們把它稱為favoriteColors，它請求用戶選擇最喜歡的顏色：

 





當用戶點擊上面復選框中的任意一個時，他們立刻看到formData對象發生了變更。我們把復選框的值存儲到fromData.favoriteColors對象里。這樣我們就把復選框的值傳遞給了服務器了。
復選框點擊處理
有時候，當某人點擊了復選框后，你需要對其進行處理。你需要做的處理可能如下：計算某個值，更改某些變量或者進行數據綁定。要實現這些，你要使用$scope.yourFunction = function() {};在app.js內創建函數。接著你就可以在的的復選框上使用ng-click="yourFunction()"來調用這個函數了。
處理表單復選框的方法有許多種，Angular提供了一個非常簡單的方法：使用ng-click調用用戶自定義的函數。
自定義復選框對應的值
默認情況下，綁定到復選框上的值是ture或者false。有時候，我們希望返回的其它值。Angular提供了一種非常好的處理方式：使用ng-ture-value和ng-false-value。
我們添加另外一組復選框，不過這時侯我們使用的不再是true或者false，而是用戶自定義的值。

 





另外，現在我們還在formData對象里增加了一個awesome變量。如果此時設置這個值為true，那么返回的值應該是ofCourse，如果設置為false，那么返回的值為iWish。
復選框
依據 官方說明文檔, 這是和單選框不同之處:

 





需要了解更多有關復選框的信息，請關注Angular 復選框說明文檔.

單選按鈕
單選按鈕比復選框容易些，就在于無需存儲多選項數據. 單選就是一個值. 下面添加一個單選按鈕看看.

 





就像這樣，單選按鈕就綁定到數據對象了.
單選按鈕用法
據 官方文檔, 這是提供的選項:

 




 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com