动态标签的Angular Kendo UI Tabstrip活动状态

debugcn 发表于 Dev

疲劳的

我正在尝试使用Angular JS中的Kendo UI Tabstrip实现动态选项卡。如何指示活动状态？例如，我希望默认情况下第二个选项卡处于活动状态。

带有指令的标记

<div data-kendo-tab-strip="" data-k-animation="false" k-data-source="panes" k-data-text-field="'title'" k-data-content-field="'content'" ></div>




//Tabs controller
ngUI.controller('nguiTabsController', function($scope) {
     $scope.panes = {

        data : [ {title:"First", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor sed lacus interdum rutrum. Mauris mauris dui, rhoncus ut magna vitae, faucibus elementum lectus. "},
                 {title:"Second", content:"Sed auctor, turpis at scelerisque dapibus, dolor quam laoreet nibh, in pulvinar augue est a est. Nulla eu nulla nunc. Donec eu augue placerat, tincidunt diam vel, fringilla velit. Ut convallis faucibus neque. Nullam pellentesque, nisi quis facilisis tincidunt."},
                 {title:"Third", content:"Maecenas posuere tellus vel elit cursus porttitor. Proin auctor lorem risus, sit amet blandit ligula ultricies sit amet. Pellentesque eget velit ut libero faucibus lobortis."},
                 {title:"Fourth", content:"Suspendisse sodales consequat aliquet. Mauris ultricies nisl a metus convallis, at iaculis elit scelerisque. Nullam dignissim convallis lectus eu malesuada. Etiam libero mi, suscipit at auctor id, porta eu justo. Nullam a ipsum dictum, gravida erat vitae, sollicitudin justo."},
                 {title:"Fifth", content:"Phasellus suscipit ipsum molestie augue interdum sodales. Sed sit amet eros in odio viverra aliquam vitae nec odio. Nulla condimentum eleifend tortor, non malesuada purus placerat non. Mauris porttitor odio tortor."}]


};

}）;

Jbasiago

更改div以定义小部件引用；

<div data-kendo-tab-strip="tabStrip"...

在控制器中，创建tabStrip范围变量，然后对其进行监视。设置后，请按数字选择所需的标签。

ngUI.controller('nguiTabsController', function($scope) {
    $scope.tabStrip = null;
    $scope.$watch('tabStrip', function() {
      $scope.tabStrip.select(0);
    });

    $scope.panes...
}

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

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