Question

我有跟随html和Angularjs控制器代码动态添加行。

<form name="{{form.name}}"
      ng-repeat="form in forms">         
  <h2>{{form.name}}</h2>
  <div ng-repeat="(i,cont) in form.contacts">
          <input type="text" class="xdTextBox" ng-model="cont.ac"/>
          <input type="text" class="xdTextBox" ng-model="cont.a_number"/>
          <input type="text" class="xdTextBox" ng-model="cont.p_id"/>
  </div>
  <button ng-click="submit(form)">Submit</button>
  <button ng-click="addFields(form)">Add</button>
  <hr>
</form>

添加rowsis的控制器代码

$scope.addFields = function (form) {     
   if (typeof  form.contacts == 'undefined') {
         form.contacts = [];
    }
    form.contacts.push({name:'', ac: '', a_number: '', p_id: '' });
}

我接下来要做的是在添加行之后，如果我将鼠标悬停在任何行上，则会显示删除链接或按钮，如果单击它，则会删除该行。这是添加行的工作plunker。 http://plnkr.co/edit/9bUnd7t0PyMwykgi0VZR?p=preview 请告诉我如何将鼠标悬停在一行上，然后点击删除按钮或链接以删除该列表。感谢

Answer 1

看看这里：

http://plnkr.co/edit/zxjHLzqiAQnZzcaUwgBL?p=preview

我将“contact”类添加到div容器中，以便我可以在CSS中识别它：

<div ng-repeat="(i,cont) in form.contacts" class="contact">

我在容器中添加了删除按钮，并为其提供了“删除”类：

<button type="button" class="remove" ng-click="form.contacts.splice(i, 1);">Remove</button>

（注意：如果你需要做一些比从数组中删除它更复杂的事情，你可能希望在你的范围内有一个删除联系人的函数。）

要让按钮最初隐藏，但是当您将鼠标悬停在该行上时显示，我使用了以下CSS：

.contact .remove { visibility: hidden; }
.contact:hover .remove { visibility: visible; }

Answer 2

您可以通过向范围添加一个函数来接收表单和索引，然后拼接所需的索引：

 <div ng-repeat="(i,cont) in form.contacts">
              <input type="text" class="xdTextBox" ng-model="cont.ac"/>
              <input type="text" class="xdTextBox" ng-model="cont.a_number"/>
              <input type="text" class="xdTextBox" ng-model="cont.p_id"/>
              <button ng-click="delete(form, i)">Delete</button>
      </div>

然后，Javascript（将其添加到您的控制器）：

$scope.delete = function(form, index) {
      form.contacts.splice(index, 1);
    }

http://plnkr.co/edit/2SEGDnGoE7kaw0KvOpKr?p=preview

Angularjs删除动态生成的行

2 个答案: