Angular с использованием $index в ng-модели

У меня есть следующий цикл, в котором я пытаюсь увеличить несколько полей на основе индекса массива каждый раз в цикле.

<div class="individualwrapper" ng-repeat="n in [] | range:4">
  <div class="iconimage"></div>
  <div class="icontext">
    <p>Imagine that you are in a health care facility.</p> 
    <p>Exactly what do you think this symbol means?</p>
    <textarea type="text" name="interpretation_1" ng-model="interpretation_1" ng-required="true"></textarea>
    <p>What action you would take in response to this symbol?</p>
    <textarea type="text" name="action_1" ng-model="action_1" ng-required="true"></textarea>  
  </div>
</div>

Я хотел бы сделать что-то похожее на это"

ng-model="interpretation_{{$index + 1}}"

Однако Angular не отображает это значение? Как лучше всего добавить такую ​​логику в поле mg-model?


javascript html angularjs angularjs-ng-model
person byrdr    schedule 22.01.2015    source источник
comment
проверьте это для справки: stackoverflow.com/questions/27917218/   -  person Ved    schedule 22.01.2015
comment
Возможный дубликат Назначение ng-model флажкам, сгенерированным ng-repeat   -  person Kamal Nayan    schedule 10.06.2019

Ответы (1)


arrow_upward
13
arrow_downward

Это становится недопустимым выражением при использовании интерполяции с выражением ng-model. Вам нужно указать имя свойства там. Вместо этого вы можете использовать объект и использовать скобки.

то есть в вашем контроллере:

$scope.interpretation = {};

и, по вашему мнению, используйте его как:

ng-model="interpretation[$index + 1]"

Демо

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.interpretation = {};
  $scope.actions = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{interpretation}} {{actions}}
  <div class="individualwrapper" ng-repeat="n in [1,2,3,4]">
    <div class="iconimage">
    </div>
    <div class="icontext">
      <p>Imagine that you are in a health care facility.</p>
      <p>Exactly what do you think this symbol means?</p>
      <textarea type="text" ng-attr-name="interpretation{{$index + 1}}" ng-model="interpretation[$index+1]" ng-required="true"></textarea>
      <p>What action you would take in response to this symbol?</p>
      <textarea type="text" name="action{{$index + 1}}" ng-model="actions[$index+1]" ng-required="true"></textarea>
    </div>
  </div>
</div>

person PSL    schedule 22.01.2015
comment
Кажется, я не могу получить обозначение скобки для анализа значения. ng-model=interpretation[$index + 1] отображается в html, как и другие значения области видимости, которые я пробовал. - person byrdr; 23.01.2015
comment
Работает на меня. Какую версию углового вы используете? - person PSL; 23.01.2015
comment
См. встроенную демонстрацию, отредактированную в ответ. и вам нужно заранее определить объект в вашем контроллере, чтобы вы не обновляли свойство в дочерней области - person PSL; 23.01.2015
comment
Это все еще не работает. Код фрагмента в инспекторе Chrome по-прежнему показывает неинтерполированную нотацию {{}}. Я использую угловой 1.3 - person byrdr; 23.01.2015
comment
Я не понимаю вашей проблемы. Ng-модель явно обновляется. См. интерполяцию в начале. Что ты говоришь. Можете ли вы объяснить больше - person PSL; 23.01.2015
comment
Я поместил скриншот в свой вопрос о коде, который я вижу из фрагмента после его запуска. - person byrdr; 23.01.2015
comment
вы говорите об атрибуте value? если да, то № 1) атрибут value в чистом html предназначен только для указания значения по умолчанию, № 2) просто введите <textarea></textarea>, введите и посмотрите, проверьте, вы не увидите значение или что-то еще. это свойство значения, которое обновляется, а не атрибут # 3) При использовании angular вы не беспокоитесь о DOM, вы беспокоитесь только о ng-модели и привязках вашей модели представления, позвольте angular управлять DOM, однако это необходимо, не так ли? сделать угловой способ. - person PSL; 23.01.2015
comment
. # 4) если вы действительно хотите обновить атрибут значения, просто поставьте value="{{interpretation[$index + 1]}}" или ng-value="interpretation[$index + 1]" - person PSL; 23.01.2015
comment
Спасибо, извините, что запутался. Я вижу, как это работает сейчас. Я предполагал, что нотация скобок будет разрешена в html. Я ценю объяснение. - person byrdr; 23.01.2015
comment
@byrdr Добро пожаловать :), вам нужна запись в скобках независимо от того, иначе интерполяция внутри ng-модели приведет к ошибке синтаксического анализа. Вы можете увидеть свою консоль с исходным кодом. - person PSL; 23.01.2015