Как создать уникальные теги ng-form в форме с помощью ng-repeat в angular

Я пытаюсь создать форму, частью которой является таблица, которая перебирает список объектов и для каждого объекта позволяет пользователю проверять/снимать атрибуты. Остальная часть формы работает нормально, но у меня возникают проблемы с установкой атрибута ng-model для флажков.

Вот что у меня есть:

<table>
    <thead>
        <tr>
            <td>Objects and Fields</td>
            <td>Createable</td>
            <td>Deleteable</td>
            <td>Readable</td>
            <td>Updateable</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="object in myAppObjects">
          <td>
            {{object.name}}&nbsp;{{object.id}}
            <input type="checkbox" name="app_access_{{object.id}}" ng-model="app_access" value="false">
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
</table>

Сначала я попытался установить ng-model="app_access_{{object.id}}" так, чтобы у меня была уникальная ng-модель для каждой ячейки. Это приводило к тому, что строка таблицы повторялась несколько десятков раз. Каждая из этих пустых ячеек также будет иметь флажок. Будет пять флажков для каждого объекта и несколько объектов в форме в данный момент времени. Мне нужно иметь доступ к каждому флажку (или, что еще лучше, к списку отмеченных) в контроллере.


javascript html angularjs angularjs-ng-repeat
person akronymn    schedule 29.11.2012    source источник
comment
Я не думаю, что вы можете использовать выражения Angular для именования элемента поля. См. groups.google.com/d/topic/angular/v5lK1y8-HXQ. /обсуждение   -  person Mark Rajcok    schedule 30.11.2012
comment
использование угловых выражений для имени работает нормально. Просто использование их для атрибута ng-model вызывает проблемы. Я думаю, что ответ Макса ниже указывает мне правильное направление. Придется еще поэкспериментировать.   -  person akronymn    schedule 30.11.2012
comment
По моему опыту, это, к сожалению, не всегда работает нормально. Вот скрипка, показывающая проблему при использовании выражения Angular для имени вместе с проверкой формы Angular: jsfiddle.net/mrajcok /teZKX При проверке элемента ввода выражение Angular, по-видимому, оценивается, но средства проверки Angular, похоже, не распознают его. Поскольку этот случай не работает, я лично не использую выражения Angular в именах полей с любыми элементами управления формой. YMMV. Может с флажками нормально работает. Кстати, атрибут name является необязательным для флажков Angular — он может вам не понадобиться.   -  person Mark Rajcok    schedule 01.12.2012
comment
Это правда, в этом случае имя не имеет отношения к делу.   -  person akronymn    schedule 03.12.2012
comment
На выходных я написал директиву, в которой используются переключатели, и в итоге я использовал угловые выражения для имен полей. :-P Так много, потому что я не использую выражения Angular в именах полей с любыми элементами управления формой. Думаю, теперь мне придется сказать, что я не использую выражения Angular в именах полей, если эти имена используются с проверкой формы Angular. Спасибо за расширение / исправление моего понимания этого.   -  person Mark Rajcok    schedule 03.12.2012
comment
Звучит так, будто лучше вообще избегать.   -  person akronymn    schedule 05.12.2012

Ответы (2)


arrow_upward
3
arrow_downward

Поскольку ngRepeat создает новую (дочернюю) область для каждого элемента, создание новых ng-моделей (привязанных к этим новым областям) для элементов не будет работать, поскольку эти модели/данные будут доступны только внутри этих внутренних областей. Мы не можем написать функцию контроллера для доступа к этим внутренним/дочерним областям. Лучше ссылаться на что-то в 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-repeat следующим образом:

<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/

Итог: нам нужно, чтобы модели флажков были определены в/в родительской области (в моей скрипке, $scope MyCtrl), а не в/в внутренних/дочерних областях ngRepeat.

person Mark Rajcok    schedule 01.12.2012

arrow_upward
0
arrow_downward

Как правило, если вы перебираете коллекцию с помощью 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>
person Max    schedule 30.11.2012
comment
Обратите внимание, что первый пример выше (элемент в списке) не будет работать, если элементы в массиве списка являются примитивами (например, массив строк не будет работать). Привязка данных Two-say будет нарушена. См. stackoverflow.com/questions/12977894/ - person Mark Rajcok; 01.12.2012