Angularjs 在ng repeat中包含删除选项的下拉列表_Angularjs_Twitter Bootstrap 3

Angularjs 在ng repeat中包含删除选项的下拉列表

angularjs twitter-bootstrap-3

Angularjs 在ng repeat中包含删除选项的下拉列表,angularjs,twitter-bootstrap-3,Angularjs,Twitter Bootstrap 3,如何在单击标记时实现删除？当我删除并单击某个内容时，视图在刷新之前不会被反映 <div class="dropdown"> <span ng-repeat="tag in tag track by $index" data-toggle="dropdown">[[tag]]</span> <!--<a data-toggle="dropdown" href="#">Dropdo

如何在单击标记时实现删除？当我删除并单击某个内容时，视图在刷新之前不会被反映

 <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>

尝试

this.tag

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

删除

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

试试

这个标签

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

删除

如果它不起作用，请将你的角度代码也张贴出来

你的

Delete
元素在ng repeat
之外，因此你将传递到deleteHashtag
函数完整标记列表ng repeat
重复插入的元素和每个子元素。
您的Delete
元素在ng repeat
之外，因此您将传递到deleteHashtag
函数完整标记列表ng repeat
重复插入元素的位置和每个子元素。
尝试将ng repeat
属性放在下拉div中。这样，您将获得每个标记的单独下拉列表。您可能需要将下拉列表div
转换为span
，使其看起来相同
我写了一个小的演示页面，似乎做你想要的。单击每个标记以打开其自己的下拉菜单，然后单击删除并看着它消失。下面是演示代码，它也住在plunker中
复制/粘贴时需要注意的一些事项：
标记数组在我的代码中称为tags
。它在html中被称为tag
，在javascript中被称为hashtag
我使用$parent
访问虚拟p\u 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>


angular.module（'myApp'，[]）
.controller（'MyController'，['$scope'，函数（$scope）{
$scope.tags=['javascript'，'webgl'，'angularjs'，'twitter bootstrap'，'jquery']；
$scope.p_id='some value'；
$scope.deleteHashtag=函数（p_id、hashtag、索引）{
//我删除了这里的api调用，因为我没有访问它的权限
//这似乎不是问题的一部分。你可能想
//拼接在成功方法内部，而不是外部。
log（'delete hash tag'+p_id+''+hashtag+''+索引）；
$scope.tags.splice（索引1）；
};
$scope.showHashtags=函数（标记）{
log（'show hash tags'）；
//某些函数不执行与当前问题无关的操作。
};
}]);
.spacey{左边距：3px；右边距：3px；}
.cursor{cursor:pointer；}
{{tag}}

删除

查看所有

尝试将ng repeat
属性放在下拉div中。这样，每个标签都会有一个单独的下拉列表。您可能需要将下拉列表div
转换为span
，使其看起来相同
我写了一个小的演示页面，似乎做你想要的。单击每个标记以打开其自己的下拉菜单，然后单击删除并看着它消失。下面是演示代码，它也住在plunker中
复制/粘贴时需要注意的一些事项：
标记数组在我的代码中称为tags
。它在html中被称为tag
，在javascript中被称为hashtag
我使用$parent
访问虚拟p\u 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>


angular.module（'myApp'，[]）
.controller（'MyController'，['$scope'，函数（$scope）{
$scope.tags=['javascript'，'webgl'，'angularjs'，'twitter bootstrap'，'jquery']；
$scope.p_id='some value'；
$scope.deleteHashtag=函数（p_id、hashtag、索引）{
//我删除了这里的api调用，因为我没有访问它的权限
//这似乎不是问题的一部分。你可能想
//拼接在成功方法内部，而不是外部。
log（'delete hash tag'+p_id+''+hashtag+''+索引）；
$scope.tags.splice（索引1）；
};
$scope.showHashtags=函数（标记）{
log（'show hash tags'）；
//某些函数不执行与当前问题无关的操作。
};
}]);
.spacey{左边距：3px；右边距：3px；}
.cursor{cursor:pointer；}
{{tag}}

删除

查看所有

请也添加功能代码。我也添加了角度代码。请也添加了功能代码。我也添加了角度代码。@JimmyPaul:嗨，几点建议z:1>>请不要完全更改您的问题（在这种情况下，您在编辑后更改了您的问题，使我的答案完全不相关），以防您将其添加为更新，这样可以帮助别人。2> >我不确定视图中的或正在谈论的abt。可能是一些约束问题。我认为你需要用代码或更好的p来澄清它