Question

我有一个标准的Angular控制器，它使用适当的路由调用：

when('/admin/foo/new',{
            controller:FooNewCtrl,
            templateUrl: 'frontend/partials/admin/foo-new.html'
        }).

FooNewCtrl，其中没有任何内容：

function FooNewCtrl($scope) {
}

在foo-new.html中，我有一个部分，我希望用户能够动态添加和删除输入字段：

<label>Fields<a href="?????"><i class="foundicon-plus"></i></a></label>
  <div ng-repeat="field in fields">
     <input type="text" id="field.id"/><a href="????">delete</a>
  </div>

我不知道如何实现这一目标。请注意，我有一个带有“加号”图标的链接，用于添加新字段，然后在显示字段时，会删除一个链接。我不知道如何用控制器控制“字段”并让用户保持在页面上。我正朝着某个方向努力。

Answer 1

在您的重复播放中，您基本上会对字段集合中的每个字段说出这个范围＆＃39;

function FooNewCtrl($scope) {
     //What you're iterating over in your ng-repeat
     $scope.fields = [];

     //Declare a function on the scope that you can reference from your template
     $scope.addField = function(){

         $scope.fields.push(1); //Push a new object into the fields
     };

}

所以，是的，你将ng-click事件添加到元素（图标的父元素），将新字段推送到字段上。

<label>Fields<a ng-click="addField()"><i class="foundicon-plus"></i></a></label>
<div ng-repeat="field in fields">
 <input type="text" id="field.id"/><a href="????">delete</a>
 </div>

单击加号图标现在应该动态添加输入。我会把它们留给你。

在Angular应用程序中动态添加输入字段

1 个答案: