我在ngForm中嵌套了ngRepeat-。表单绑定到页面控制器上的变量。然后使用ngIf根据选项卡的活动索引将表单添加到DOM中/从DOM中删除。
奇怪的是，如果我以升序激活选项卡，则该表单已正确绑定到控制器的form变量，但是如果我以降序激活了选项卡，则该表单未绑定。
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>有人知道为什么会这样吗？
最佳答案
我不知道为什么表单未与控制器绑定（这必须归因于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>关于javascript - ngRepeat中的AngIf与AngIf绑定(bind)的AngularJS ngForm导致未定义形式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34051476/