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>

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

Answer 1

您需要使用'track by'并为AngularJS do Bind创建一个'id'
参见示例：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>

Angular Kendo TabStrip在动态数据更改后无法正常工作

1 个答案: