Question

当我使用angular单击子图像时，我想删除父li。这就是我到目前为止所拥有的：

查看

<ul class="cg-tag-list">
    <li ng-repeat="tag in list">
        <span>{{tag}}</span>
        <img src="" ng-click="fnRemoveTag()"/>
    </li>
</ul>

JS

//Remove Tag
$scope.fnRemoveTag = function () {
   // Put Code here
}

Answer 1

将tag传递给fnRemoveTag函数;

<ul class="cg-tag-list" >
  <li ng-repeat="tag in list">
      <span>{{tag}}</span>
      <img src="" ng-click="fnRemoveTag(tag)"/>
   </li>
</ul> 

$scope.fnRemoveTag = function (tag) {
    // get the index of the tag which we are going to remove
    var index = $scope.list.indexOf(tag);

    // remove that tag from the `list` array
    $scope.list.splice(index, 1);

    //this will automatically update the dom for you
}

这是一个DEMO

并注意您可以传递代替$index的{{1}}

tag

并删除控制器中的元素，

<img src="" ng-click="fnRemoveTag($index)"/>

示例DEMO

如果您不使用$scope.fnRemoveTag = function(index) { // remove that tag from the `list` array $scope.list.splice(index, 1); //this will automatically update the dom for you }中的orderBy，请使用ng-repeat其他老虎机使用$index，因为如果您使用tag它将根据排序描述对数组进行排序，当您传递orderBy时，它可能不是$index的正确索引。

表示EX：

假设你有像$scope.list这样的数组，你需要通过

来重复这个

$scope.list = [3, 2, 1];

在<li ng-repeat="tag in list | orderBy:tag">之后，orderBy将重复已排序的数组，但实际上ng-repeat仍然如前所述＆amp;它不会排序只有重复顺序得到改变。

所以$scope.list是$index的索引，它不代表ng-repeat的索引，如果你不使用$scope.list那么两者都将是相同。

然后当您尝试使用传递的orderBy从$scope.list中删除时，它可能无法删除正确的元素。

请参阅此DEMO

尝试删除第一个并注意它实际上删除了最后一个。因为我们将$index作为$index传递给函数，并删除0的{{1}}索引元素，其值为3。

希望这是有道理的。

Answer 2

查看

<ul class="cg-tag-list" >
      <li ng-repeat="tag in list">
          <span>{{tag}}</span>
          <img src="" ng-click="fnRemoveTag(tag)"/>
       </li>
    </ul>

JS

//Remove Tag
$scope.fnRemoveTag = function (listItem) {
   var index = $scope.list.indexOf(listItem);
   if (index > -1) {
     $scope.list.splice(index, 1);
  }
}

Answer 3

如果你有jQuery，你可以使用它：

var li = $(this).closest("li");
li.parent().remove(li);

Answer 4

只需将$ index作为函数参数，然后使用数组拼接方法。

查看

String passphrase = "ASDYB982234235512"; byte[] key = passphrase.getBytes(); RealmConfiguration realmConfiguration = new RealmConfiguration.Builder() .encryptionKey(key) .build();

Javascript （不要在此目的中使用orderBy过滤器）

<ul class="cg-tag-list" > <li ng-repeat="tag in list"> <span>{{tag}}</span> <img src="" ng-click="fnRemoveTag($index)"/> </li> </ul>

单击子图像后删除父li

4 个答案: