帶ng-repeat的角度複選框形式只能選擇一個選項

我正在嘗試創建一個多步表單，第2步是一堆複選框。下面是複選框形式：帶ng-repeat的角度複選框形式只能選擇一個選項

<form ng-submit="createSubCategory(formData)"> 
    <div ng-repeat="sub_category in event_sub_categories"> 
     <ion-checkbox ng-model="formData.sub_category" ng-true-value="'{{sub_category}}'"> 
      {{sub_category}}</ion-checkbox> 
    </div> 
    <button type="submit" class="button button-block button-positive">Continue</button> 
</form>

的複選框（event_sub_categories）的數據被從服務器拉出。我需要將用戶選擇的輸入保存到formData中。 formData被收集在多步表單的每個頁面上，它將在所有表單頁面之後與一個發佈請求一起提交。我對角度很陌生，對於複選框的工作方式我有些困惑。

問題1：我理解ng模型如何與普通文本域一起工作。但我不確定我是否知道它如何與複選框一起工作。 ng-model是否替換了html名稱元素？意思是，當我使用$resource將這個提交給服務器時，是由ng-model設置的數據的關鍵字嗎？

問題2：如何命名ng-model使其成爲formData的一部分，但它也與從數據庫中提取的名稱sub_category有關。問題是，使用上面的代碼，在任何給定時間只能選擇一個複選框，我希望用戶能夠在給定時間檢查多個複選框。如果無法做到這一點，如何通過複選框獲得我需要的功能？

來源

2016-04-14 Philip7899

也許是這樣的？ http://jsfiddle.net/t7kr8/211/ – mani

此外，這是用'ionic-framework'標記的，所以我猜你正在使用離子。你看過'ion-checkbox'嗎？ http://ionicframework.com/docs/api/directive/ionCheckbox/ – mani

爲了能夠一次選擇多個複選框，您需要一個對象（角度）來保存所有的值。我已經在我自己的應用程序中實現了這個代碼，並且發現它很容易接收它來解釋對象。（迭代對象檢查真/假值）

這是您的<ion-checkbox>代碼：

<ion-checkbox ng-repeat="sub_category in event_sub_categories" ng-model="formData[sub_category]">

這將設置subcategory: true/false的formData對象中，每被點擊複選框。

然後，您只需將該對象發送到任何地方，就像以前一樣。這裏是一個codepen，它顯示更改的複選框，已更新的formData對象和formData對象的字符串。

http://codepen.io/anon/pen/LNdaev?editors=1010

我創建了我自己的值event_sub_categories作爲一個例子，所以當然這些會從自己的

評論有所不同，如果您有任何問題。

來源

2016-04-15 01:26:51 theblindprophet

帶ng-repeat的角度複選框形式只能選擇一個選項

回答

相關問題