Angular Kendo tabStrip - 动态内容和自动 select 第一个标签

Question

使用 Kendo UI tabStrip 小部件，我想做两件事：

1) 自动 select 第一个选项卡，因为它不会立即显示选项卡内容。

2) 换出第一个tab的contentUrl，当然是在特定条件下。

有趣的是，当我在 Html 上使用 k-content-urls 指令时，第一个选项卡会立即加载内容。

ex/

<div kendo-tab-strip  k-content-urls="['myTemplate.html', 'myTemplate2.html']">

但是，我不想这样做。我更喜欢下面的方法，如 k-options="settings.tabOptions"

这是我的控制器代码中的 tabOptions，以及它下面的 HTML 标记：

 settings.tabOptions = {
            animation: { open: { effects: "fadeIn" } },
            select: function (e) {
                console.log("Selected: " + e.item.innerText);
                // NOT WORKING..
                e.sender.dataSource.options.data[0].contentUrl = "../myNewTemplate.html"
            },
            change: function (e) {
                console.log("Changed: ");
            },
            activate: function (e) {
                console.log("Activated: " + e.item.innerText);
            },
            show: function (e) {
                console.log("Shown: " + e.item.innerText);
            },
            contentLoad: function (e) {
                console.log("Content loaded in " + e.item.innerText);                
            },
            dataTextField: "title",
            dataContentUrlField: "contentUrl",
            dataSource: [{
                title: "Formatting",
                contentUrl: '../app/shared/include/grid-config/gad-config-grid-prop.html'
            },
            {
                title: "Dimensions",
                contentUrl: '../app/shared/include/grid-config/gad-config-grid-dimen.html'
            },
            {
                title: "Risk Measures",
                contentUrl: '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'
            }],
            error: function (e) {
                console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
            }
        };

 <div id="Gadgettabs" kendo-tab-strip="tabstrip" k-options="settings.tabOptions">        
        <ul> 
            <li class="k-state-active">Formatting</li>
            <li>Dimensions</li>
            <li>Risk Measures</li>
        </ul>               
    </div>

同样，我需要立即显示第一个选项卡的内容；并弄清楚如何动态更改第一个选项卡的内容。

提前致谢...

鲍勃

**** 更新 **** 我正在尝试动态更改上面 select: 事件中的 contentUrl，但它不起作用。

Answer 1

最终解决方案：

注意：如果你没有在你的 ng-controller 指令中使用 "controller as" 语法（就像我一样），那么只需在控制器代码中用 "$scope." 替换我的 "settings." 对象。当然，在 html 中，只需删除 "settings." .

// KENDO TABSTRIP
settings.urls = ['../app/shared/include/grid-config/gad-config-grid-prop.html', '../app/shared/include/grid-config/gad-config-grid-dimen.html', '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'];
if ($scope.widget.gadgetType == "chart") {
 settings.urls[0] = '../app/shared/include/barchart-config/gad-config-barchart-prop.html';
};        
settings.tabOptions = {
 //animation: { open: { effects: "fadeIn" } },           
 select: function (e) {
  console.log("Selected: " + e.item.innerText);
 },
 change: function (e) {
  console.log("Changed: ");
 },
 activate: function (e) {
  console.log("Activated: " + e.item.innerText);
 },
 show: function (e) {
  console.log("Shown: " + e.item.innerText);
 },
 contentLoad: function (e) {
  console.log("Content loaded in " + e.item.innerText);                
 },            
 error: function (e) {
  console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
 }
};

<div id="Gadgettabs" kendo-tab-strip="settings.tabStrip"
         k-rebind="settings.urls"
         k-content-urls="settings.urls"
         k-options="settings.tabOptions" >
        <ul> 
            <li class="k-state-active">TAB1</li>
            <li>TAB2</li>
            <li>TAB3</li>
        </ul>               
    </div>

Angular Kendo tabStrip - 动态内容和自动 select 第一个标签

Angular Kendo tabStrip - dynamic content and auto-select first tab

kendo-ui

kendo-tabstrip