web-dev-qa-db-fra.com

Comment sélectionner un onglet dans angular-ui? (AngularJS)

Je veux sélectionner le dernier onglet, une idée de comment faire ça? Seuls les onglets à l'intérieur du ng-repeat sont disponibles pour sélectionner, je n'utiliserai pas un ng-repeat, comment puis-je le faire sans ng-repeat?

Voici le code de travail: http://plnkr.co/edit/ZJNaAVDBrbr1JjooVMFj?p=preview

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="TabsDemoCtrl">
    <p>Select a tab by setting active binding to true:</p>
    <p>
      <button type="button" class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
      <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
      <button type="button" class="btn btn-default btn-sm" ng-click="tabs[3].active = true">SELECT LAST TAB!!!</button>
    </p>
    <p>
      <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
    </p>
    <hr />

    <uib-tabset>
      <uib-tab heading="Static title">Static content</uib-tab>
      <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
        {{tab.content}}
      </uib-tab>
      <uib-tab heading="How to select this tab???">nico</uib-tab>
    </uib-tabset>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <script type="text/javascript">
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window) {
      $scope.tabs = [{
        title: 'Dynamic Title 1',
        content: 'Dynamic content 1'
      }, {
        title: 'Dynamic Title 2',
        content: 'Dynamic content 2',
        disabled: true
      }];
    });
  </script>

</body>

</html>
javascriptangularjsangular-ui
6
lito

Voici mon code au cas où quelqu'un aurait besoin d'un autre exemple:

http://plnkr.co/edit/rBk95jt02AvE78GlGLzu?p=preview

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div ng-controller="TabsDemoCtrl">
    <p>Select a tab by setting active binding to true:</p>
    <p>
      <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">SELECT SECOND TAB!!!</button>
    </p>
    <hr />
    <uib-tabset>
      <uib-tab heading="First" active="tabs[0].active">{{tabs[0].text}}</uib-tab>
      <uib-tab heading="Second" active="tabs[1].active">Second</uib-tab>
    </uib-tabset>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <script type="text/javascript">
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window) {
      $scope.tabs = [{text:"First Text"}, {},{},{}];
    });
  </script>
</body>
</html>
3
lito

Tout ce que j'ai fait, c'est d'initialiser un nouvel objet pour contenir votre nouvel onglet et de changer votre référence dans le bouton. Cela résout votre problème mais je ne sais pas si c'est l'architecture que vous souhaitez.

Voici les faits saillants:

  $scope.separateTab = {
     title: 'How to select this tab???',
    content: 'Dynamic content 2'
  };

<uib-tab heading="{{separateTab.title}}" active="separateTab.active">nico</uib-tab>

<button type="button" class="btn btn-default btn-sm" ng-click="separateTab.active = true">SELECT LAST TAB!!!</button>

Voici le plnkr

3
Mark C.

Une façon d’y parvenir est de définir l’attribut actif de uib-tab, comme ceci:

<uib-tabset active="activeForm">

( https://plnkr.co/edit/Yn4YomuwDfTmBU3J8yl1?p=preview )

0
Pankaj Kumar Dewangan