Angular Kendo TabStrip не работает после динамического изменения данных

Я использую угловую версию Kendo TabStrip. Мои вкладки создаются динамически на основе данных и их содержимого. Работает нормально для первого раза. Но всякий раз, когда я динамически меняю содержимое, вкладка не работает. Пожалуйста, найдите следующую ссылку на плункер: 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>


angularjs kendo-tabstrip
person Mohsin Shaikh    schedule 21.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно использовать 'track by' и создать 'id' для AngularJS 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>

person Fernando    schedule 08.12.2015