如何防止选择点击标签?

疏松

如何防止选择添加其他标签的标签?在下面,我隔离了该问题,如果我单击带有加号的选项卡,然后选择了它,我想完全避免这种情况,只需单击并调用addNewTab()函数。

var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function($scope) {

  $scope.tabs = [{
    name: "Tab 1",
    active: true
  }, {
    name: "Tab 2",
    active: false
  }, {
    name: "Tab 3",
    active: false
  }];

  $scope.addTab = function($event) {
    //$event.praventDefault();//not working
    //$event.stopPropagation();//not working
    console.log($event);
    console.log("do some stuff and call addNewTab()")
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div ng-app="app">
  <div ng-controller="homeCtrl">
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active">
        {{tab.name}}
      </tab>
      <tab select="addTab($event)">
        <tab-heading>
          <i class="glyphicon glyphicon-plus-sign"></i>
        </tab-heading>
      </tab>
    </tabset>
  </div>
</div>

Divya MV

var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function($scope) {

  $scope.tabs = [{
    name: "Tab 1",
    active: true
  }, {
    name: "Tab 2",
    active: false
  }, {
    name: "Tab 3",
    active: false
  }];

  $scope.addTab = function($event) {
    //$event.praventDefault();//not working
    //$event.stopPropagation();//not working
    console.log($event);
    console.log("do some stuff and call addNewTab()")
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div ng-app="app">
  <div ng-controller="homeCtrl">
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active">
        {{tab.name}}
      </tab>
      <!-- <tab ng-click="addTab($event)"> !-->
      <li>
      <a ng-click="addTab($event)">
         <i class="glyphicon glyphicon-plus-sign"></i>
      </a>
      </li>
    </tabset>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章