te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to Select a Tab in angular-ui? (AngularJS) - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to Select a Tab in angular-ui? (AngularJS) - Stack Overflow

    javascript - How to Select a Tab in angular-ui? (AngularJS) - Stack Overflow

    programmeradmin4浏览0评论

    I want to select the last tab, any idea how to do that? Only the tabs inside the ng-repeat are available to select, I won't use a ng-repeat, how can I do it with no ng-repeat?

    Here is the working code: 

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

<head>
  <link href="//netdna.bootstrapcdn/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/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis/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>

    I want to select the last tab, any idea how to do that? Only the tabs inside the ng-repeat are available to select, I won't use a ng-repeat, how can I do it with no ng-repeat?

    Here is the working code: http://plnkr.co/edit/ZJNaAVDBrbr1JjooVMFj?p=preview

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

<head>
  <link href="//netdna.bootstrapcdn./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./ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis./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>
    • javascript
    • angularjs
    • angular-ui
    Share Improve this question edited Jan 4, 2016 at 20:48 lito asked Jan 4, 2016 at 20:38 litolito 3,12511 gold badges45 silver badges71 bronze badges 2
    • 1 You're not adding that tab to the tabs collection..Should it be added? Or should it be separate? – Mark C. Commented Jan 4, 2016 at 20:43
    • Hi! I like it separate. I don't want to use a ng-repeat, Thanks! – lito Commented Jan 4, 2016 at 20:47
    Add a ment  | 

    4 Answers 4

    Reset to default 4

    Here is my code in case someone need some other example:

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

    <!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
  <link href="//netdna.bootstrapcdn./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./ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis./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>

    All I did was initialize a new object to hold your new tab, and change your reference in the button. It solves your problem but I've no idea if it's your desired architecture.

    Here are the highlights:

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

    Here's the plnkr

    This is one way to attain it.

    <uib-tabset ng-init="active=1" active="active">
   <uib-tab index="1">Tab content</uib-tab>
   <uib-tab index="2">Tab content</uib-tab>
   <uib-tab index="3">Tab content</uib-tab>
   <uib-tab index="4">Tab content</uib-tab>
</uib-tabset>

    NOW change the value of $scope.active in javascript or script section and the active tabs will change.Index value should be different for each tab.

    One way to achieve is to set the active attribute of uib-tab, something like this:

    <uib-tabset active="activeForm">

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

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论