Question

如何在点击代码时实施删除？当我删除点击某些内容时，在我刷新之前不会反映该视图。

 <div class="dropdown">
                <span ng-repeat="tag in tag track by $index" data-toggle="dropdown">[[tag]]</span>
                <!--<a data-toggle="dropdown" href="#">Dropdown trigger</a>-->
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li ng-click="deleteHashtag(p_id, tag, $index)" class="cursor">Delete</li>
                    <li class="divider"></li>
                    <li ng-click="showHashtags(tag)" class="cursor">View All</li>
                </ul>
            </div>

以下是Angular代码

  $scope.deleteHashtag = function(p_id,hashtag, index){

        $http.get("/api/hashtag/delete?contactId="+p_id.toString()+"&hashtag="+hashtag.toString())
            .success(function(response){
                console.log(response);
                if(response.SuccessCode){
                    console.log("Deleted Tag");
                }
                else {
                    console.log("Delete fail");
                }
            });
        $scope.hashtag.splice(index, 1);
    };

Answer 1

尝试this.tag

<li ng-click="deleteHashtag(p_id, this.tag, $index)" class="cursor">Delete</li>

如果它不起作用，请发布你的角度代码

Answer 2

您的<li ng-click="deleteHashtag(p_id, tag, $index)" class="cursor">Delete</li>元素位于ng-repeat之外，因此您将转到deleteHashtag函数完整标记列表。 ng-repeat重复插入它的元素和每个子元素。

Answer 3

尝试将ng-repeat属性放在下拉列表中。这样，您将获得每个标签的单独下拉列表。您可能需要将下拉列表div变为span，以使其看起来相同。

我写了一个小小的演示页面，似乎可以做你想要的。单击每个标签以显示其自己的下拉菜单，然后单击删除并观看它消失。演示代码如下，并且还存在于plunker here中。

复制/粘贴时要注意的一些事项：

我的代码中的标记数组称为tags。它在您的HTML中被称为tag，在您的javascript中被称为hashtag。
我使用$parent访问虚拟p_id变量，因为它现在正在ng-repeat内访问。

祝你好运！

<!doctype html>
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function($scope) {

        $scope.tags = ['javascript', 'webgl', 'angularjs', 'twitter-bootstrap', 'jquery'];
        $scope.p_id = 'some value';

        $scope.deleteHashtag = function(p_id, hashtag, index) {
            // I removed the api call here since I don't have access to it and
            // it doesn't seem to be part of the problem.  You may want to put
            // the splice inside the success method instead of outside though.
            console.log('delete hash tag ' + p_id + ' ' + hashtag + ' ' + index);
            $scope.tags.splice(index, 1);
        };

        $scope.showHashtags = function(tag) {
            console.log('show hash tags');
            // some function that does something not related to the problem at hand.
        };

      }]);
    </script>
    <style> 
      .spacey { margin-left: 3px; margin-right: 3px;} 
      .cursor { cursor: pointer; }
    </style>
  </head>
  <body>
    <div ng-controller="MyController as ctrl">
        <span class="dropdown cursor" ng-repeat="tag in tags track by $index">
          <span class="label label-default spacey" data-toggle="dropdown">{{tag}}</span>
          <ul class="dropdown-menu">
            <li ng-click="deleteHashtag($parent.p_id, tag, $index)" class="cursor">Delete</li>
            <li class="divider"></li>
            <li ng-click="showHashtags(tag)" class="cursor">View All</li>
          </ul>
        </span>
    </div>
  </body>
</html>

使用ng-repeat中的删除选项下拉列表

3 个答案: