2

ngForm-sが内にネストされていngRepeatます。フォームは、ページのコントローラーの変数にバインドされます。を使用して、タブのアクティブなインデックスに基づいて、フォームが DOM に追加されたり、DOM から削除されたりしますngIf。

奇妙なことに、タブを昇順でアクティブにすると、フォームはコントローラーのフォーム変数に適切にバインドされますが、タブを降順でアクティブにすると、フォームはバインドされません。

angular.module("myApp", [])

.controller("MyController", function($scope) {
  var ctrl = this;

  ctrl.index = 0;
  ctrl.tabs = [1, 2, 3, 4, 5];
  ctrl.text = null;

  ctrl.setIndex = function(index) {
    ctrl.index = index;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="MyController as ctrl">
    {{ctrl.form ? "Form is bound!" : "Form is NOT bound." }}
    <div ng-repeat="item in ctrl.tabs">
      <ng-form name="ctrl.form" ng-if="ctrl.index===$index">
        <input type="text" ng-attr-name="{{item+'-test'}}" ng-model="ctrl.text" required/>
      </ng-form>
    </div>
    <ul>
      <li><a href="#" ng-click="ctrl.setIndex(0)">1</a></li>
      <li><a href="#" ng-click="ctrl.setIndex(1)">2</a></li>
      <li><a href="#" ng-click="ctrl.setIndex(2)">3</a></li>
      <li><a href="#" ng-click="ctrl.setIndex(3)">4</a></li>
      <li><a href="#" ng-click="ctrl.setIndex(4)">5</a></li>
    </ul>
  </div>
</body>

なぜこれが起こっているのか知っている人はいますか？

4

1 に答える 1

1

フォームがコントローラーからバインドされていない理由がわかりません (これはng-repeat内部が原因である必要があります)。

ただし、各フォームを異なる名前にバインドすると、次のようになります。

<ng-form name="ctrl.form{{item}}" ng-if="ctrl.index===$index">

それにアクセスするための簡単なメソッドを定義します。

ctrl.currentForm = function() {
   return ctrl['form' + ctrl.tabs[ctrl.index]];
};

その後、すべてが期待どおりに機能します。

angular.module("myApp", [])

.controller("MyController", function($scope) {
  var ctrl = this;

  ctrl.index = 0;
  ctrl.tabs = [1, 2, 3, 4, 5];
  ctrl.text = null;

  ctrl.currentForm = function() {
     return ctrl['form' + ctrl.tabs[ctrl.index]];
  };
  
  ctrl.setIndex = function(index) {
    ctrl.index = index;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="MyController as ctrl">
    {{ctrl.currentForm() ? "Form is bound in tab with index " + ctrl.index + "!" : "Form is NOT bound." }}
    <div ng-repeat="item in ctrl.tabs">
      <ng-form name="ctrl.form{{item}}" ng-if="ctrl.index===$index">
        <input type="text" ng-attr-name="{{item+'-test'}}" ng-model="ctrl.text" required/>
      </ng-form>
    </div>
    <ul>
      <li><a href="#" ng-click="ctrl.setIndex(0)">1</a></li>
      <li><a href="#" ng-click="ctrl.setIndex(1)">2</a></li>
      <li><a href="#" ng-click="ctrl.setIndex(2)">3</a></li>
      <li><a href="#" ng-click="ctrl.setIndex(3)">4</a></li>
      <li><a href="#" ng-click="ctrl.setIndex(4)">5</a></li>
    </ul>
  </div>
</body>

于 2015-12-03T07:22:07.320 に答える