我想在选项卡中添加一个图标以有角度的 ui-bootstrap 关闭它答案

【问题标题】：I want to add a icon to a tab to close it in angular, ui-bootstrap我想在选项卡中添加一个图标以有角度的 ui-bootstrap 关闭它
【发布时间】：2015-10-20 18:26:13
【问题描述】：

我有一组带有加号引导图标的选项卡，可以动态添加选项卡，

    var app = angular.module('plunker', ['ui.bootstrap']);
    app.controller("TabsParentController", function ($scope) { 
   var setAllInactive = function() {
    angular.forEach($scope.workspaces, function(workspace) {
        workspace.active = false;
    });
   };

    var addNewWorkspace = function() {
    var id = $scope.workspaces.length + 1;
    $scope.workspaces.push({
        id: id,
        name: "Workspace " + id,
        active: true
    });
   };

   $scope.workspaces =
  [
    { id: 1, name: "Workspace 1", active:true  },
    { id: 2, name: "Workspace 2", active:false }
  ];

  $scope.addWorkspace = function () {
    setAllInactive();
    addNewWorkspace();
  };       

  });

  app.controller ("TabsChildController", function($scope, $log){

  });

这是 plunkr：http://plnkr.co/edit/iXYHt8sqEzk1R5J4eZxm?p=preview，我试图实现的是为每个选项卡添加一个关闭图标，以便当您单击该图标时，选项卡会像这样 plunkr：http://jsfiddle.net/alfrescian/ZE9cE/ 关闭。提前致谢。

【问题讨论】：

标签： angularjs tabs angular-ui-bootstrap

【解决方案1】：

要添加图标，您需要<tab-heading> 标签。添加后，它就可以正常工作（我只复制了前几行......仍然需要选项卡中的其他行）。

<tab ng-repeat="workspace in workspaces" active=workspace.active>
    <tab-heading>
        {{workspace.name}} <a ng-click="removeTab($index)" href=''><i class="icon-remove"></i></a>
    </tab-heading>

您还需要添加 removeTab 方法。您需要做的就是从您的 JSON 中拼接对象。示例 jsfiddle 包含一个删除函数，向您展示如何操作。

【讨论】：

感谢您的信息，当我得到这个工作时，我会把它放在这里。
我必须为代码添加一个索引才能使其工作，$scope.removeWorkspace = function(item) { var index = $scope.workspaces.indexOf(item); $scope.workspaces.splice(index, 1); };在网上寻找信息，我在 angular docs 上找到了一些信息，让我找到了正确的方法，这里有一个更新的 plunker 如何添加索引：plnkr.co/edit/IRNonRk5aP366iCGM6UN?p=preview
是的，如果你传递的是项目本身而不是项目的索引，你需要找到索引。在我的示例中，它会将项目的索引传递给删除函数。

【解决方案2】：

HTML 标记

 <!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="TabsParentController">
    <tabset>
        <tab ng-repeat="workspace in workspaces"
             active=workspace.active >
            <tab-heading>
              {{workspace.name}}
                <a ng-click="removeWorkspace(workspace.id)"><i class="icon-remove-sign"></i></a>
            </tab-heading>
            <div ng-controller="TabsChildController">
                <div>
                    {{$parent.workspace.id}} : {{ $parent.workspace.name}}
                </div>
                <input type="text" ng-model="workspace.name"/>
            </div>     
        </tab>
        <tab select="addWorkspace()">
            <tab-heading>
                <i class="icon-plus-sign"></i>
            </tab-heading>
        </tab>
    </tabset>
</div>
  </body>
</html>

控制器

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller("TabsParentController", function ($scope) {

    var setAllInactive = function() {
        angular.forEach($scope.workspaces, function(workspace) {
            workspace.active = false;
        });
    };

    var addNewWorkspace = function() {
        var id = $scope.workspaces.length + 1;
        $scope.workspaces.push({
            id: id,
            name: "Workspace " + id,
            active: true
        });
    };

    $scope.workspaces =
    [
        { id: 1, name: "Workspace 1", active:true  },
        { id: 2, name: "Workspace 2", active:false }
    ];

    $scope.addWorkspace = function () {
        setAllInactive();
        addNewWorkspace();
    };      

    $scope.removeWorkspace = function(item) {
       $scope.workspaces.splice(item, 1);

    };

});

app.controller ("TabsChildController", function($scope, $log){

});

【讨论】：

有一些问题，当您尝试删除实际选项卡时，您无法删除，而是删除了左侧选项卡，但您让我走上了正确的轨道，我正在努力。谢谢您帮助很大。