如何使用ng-repeat在角度上創建唯一的ng表單標籤

我想創建一個表單的一部分，該表的一部分是循環遍歷對象列表的表，並且對於每個對象都允許用戶檢查/取消選中屬性。表單的其餘部分工作正常，但我無法在複選框上設置ng-model屬性。如何使用ng-repeat在角度上創建唯一的ng表單標籤

這是我有：

起初，我試着設置了NG-模型= 「app_access _ {{object.id}}」，讓我將有一個獨特的NG-模型的每個細胞。這導致表格行重複數十次。每個空單元格也會有一個複選框。在給定的時間，每個對象和表單中的幾個對象將會有五個複選框。我需要能夠訪問控制器中的每個複選框（或者更好的是選中的複選框）。

來源

2012-11-29 akronymn

我不認爲你可以使用Angular表達式來命名一個字段元素。請參閱https://groups.google.com/d/topic/angular/v5lK1y8-HXQ/discussion –

使用角度表達式名稱正常工作。它只是將它們用於造成麻煩的ng-model屬性。我認爲馬克斯的回答低於正確的方向。我將不得不再做一些實驗。 – akronymn

以我的經驗，它不幸並不總是正常工作。在使用Angular表達式與角度表單驗證一起使用名稱時，這裏提供了一個小問題：http://jsfiddle.net/mrajcok/teZKX/檢查輸入元素，Angular表達式似乎被評估，但Angular驗證的東西似乎沒有認出它。由於這種情況不起作用，我個人不使用任何表單控件的字段名稱中的Angular表達式。因人而異。也許與複選框它工作正常。順便說一句，名稱屬性是可選的Angular複選框 - 你可能不需要它。 –

由於ngRepeat創建每個項目的新（子）範圍，爲這些項目創建新的ng-models（與這些新範圍綁定）將不起作用，因爲這些模型/數據只能在這些內部範圍內訪問。我們不能編寫控制器函數來訪問這些內部/子範圍。最好在myAppObjects中爲模型引用某些內容（如@Max在第二個示例中所示）。

如果myAppObjects看起來是這樣的：

$scope.myAppObjects = [ 
    {id: 1, cb1: true, cb2: false, cb3: true, cb4: true, cb5: false }, 
    {id: 2, cb1: false, cb2: false, cb3: true, cb4: false, cb5: true },

你可以寫你的NG-重複這樣的：

<tr ng-repeat="appObj in myAppObjects"> 
    <td>{{appObj.id}} 
     <input type="checkbox" ng-model="appObj.cb1"></td> 
    <td><input type="checkbox" ng-model="appObj.cb2"></td> 
    <td><input type="checkbox" ng-model="appObj.cb3"></td> 
    <td><input type="checkbox" ng-model="appObj.cb4"></td> 
    <td><input type="checkbox" ng-model="appObj.cb5"></td> 
</tr>

工作小提琴：http://jsfiddle.net/mrajcok/AvGKj/

底線：我們需要有在父作用域中定義的複選框模型（在我的小提琴中，MyCtrl的$作用域中），而不在ngRepeat內部/子作用域中/中。

來源

2012-12-01 00:04:19

這使得它非常清楚！謝謝！ – akronymn

通常，如果您使用ng-repeat迭代集合，則顯示和編輯的項目是集合的單獨成員。所以，如果你有一個正在由ng-repeat編輯字符串數組，你會做

<div ng-repeat="item in list"> 
    <input ng-model="item" /> 
</div>

，或者如果你迭代對象的列表，你會做

<div ng-repeat="obj in list"> 
    <input ng-model="obj.item" /> 
</div>

來源

2012-11-30 06:05:57 Max

請注意，如果列表數組中的項目是基元（例如，一個字符串數組將不起作用），上述第一個示例（「列表中的項目」）將不起作用。請打破。看到http://stackoverflow.com/questions/12977894/what-is-the-angularjs-way-to-databind-many-inputs –

如何使用ng-repeat在角度上創建唯一的ng表單標籤

回答

相關問題