Question

我正在尝试使用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."}]


};

}）;

Answer 1

更改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...
}

Angular Kendo UI Tabstrip动态选项卡的活动状态

1 个答案: