angularjs - 动态数据更改后，Angular Kendo TabStrip 不起作用

Question

我正在使用 Kendo TabStrip 角度版本。我的选项卡根据数据动态创建，并且其内容相同。它第一次工作正常。但是，每当我动态更改内容时，tabstrip 都不起作用。请找到以下 plunker 链接 http://plnkr.co/edit/x6rAN1YLzDZBuVcM39KA?p=preview

var app = angular.module('MyApp', ['kendo.directives']); app.controller('ngTabStripTestController', function ($scope) {

$scope.myArray = ["one", "two"];
$scope.myGridArray = ["one", "two"];

$scope.updateContent = function () {
    $scope.myGridArray = ["one2", "two2"]
}

});

<div ng-controller="ngTabStripTestController">
<div kendo-tab-strip="tabstrip" k-ng-delay="tabGridData" id="tabpan">
    <ul>
        <li ng-repeat="myElement in myArray">
            Tab {{myElement}}
        </li>
    </ul>
    <div ng-repeat="i in myGridArray">
        Contents {{i}}
    </div>
    <br />
</div>
<div data-kendo-button
     data-k-on-click="updateContent()">Update Content</div>

Answer 1

您需要使用 'track by' 并为 AngularJS 创建一个 'id' do Bind
查看示例：http ://plnkr.co/edit/0UUzIEzFhU7fX6Yuzasc?p=preview

$scope.myArray = [{id: 1, description: "one"}, {id: 2, description: "two"}];
$scope.myGridArray = [{id: 1, description: "one"}, {id: 2, description: "two"}];

$scope.updateContent = function () {
    $scope.myGridArray = [{id: 1, description: "one2"}, {id: 2, description: "two2"}];
}

<div ng-controller="ngTabStripTestController">
    <div kendo-tab-strip="tabstrip" k-ng-delay="tabGridData" id="tabpan">
        <ul>
            <li ng-repeat="myElement in myArray track by myElement.id">
                Tab {{myElement.description}}
            </li>
        </ul>
        <div ng-repeat="i in myGridArray track by i.id">
            Contents {{i.description}}
        </div>
        <br />
    </div>
    <div data-kendo-button
         data-k-on-click="updateContent()">Update Content</div>
</div>