web-dev-qa-db-ja.com

Angular ng-modelで$ indexを使用

次のループがあり、ループを通過するたびに、配列インデックスに基づいていくつかのフィールドをインクリメントしようとしています。

<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フィールドにこの種のロジックを追加するための最良の方法は何でしょうか？

javascripthtmlangularjsangularjs-ng-model
9
byrdr

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>
13
PSL