Question

我是angularJS的新手，我在使用范围的绑定属性时遇到问题，因此双向绑定可以正常工作。我正在使用示例代码生成标签。

<div ng-app="SampleApp">
    <div id="tabs" ng-controller="GridController as gridcon">
        <ul>
            <li ng-repeat="tab in tabs"
                ng-class="{active:isActiveTab(tab.url)}"
                ng-click="onClickTab(tab)">{{tab.title}}</li>
        </ul>
        <div id="mainView">
            <div ng-include="currentTab"></div>
        </div>
        <input type="button" ng-click="changedata()" value="Check" />
    </div>
</div>

现在我的示波器有两个可观察数组，我想在标签标题中显示这些数组的数量。我正在使用以下代码作为控制器。

var appRoot = angular.module('SampleApp', ["kendo.directives"]);

    appRoot.controller('GridController', ['$scope', function ($scope) {

        $scope.data1 = new kendo.data.ObservableArray([
            {
                issueId: 1,
                issue: "County Incorrect"
            },
            {
                issueId: 2,
                issue: "City Incorrect"
            },
            {
                issueId: 3,
                issue: "Name Incorrect"
            }
        ]);

        $scope.data2 = new kendo.data.ObservableArray([
            {
                "id": 11,
                "first_name": "James",
                "last_name": "Butt",
                "company_name": "Benton, John B Jr",
                "address": "6649 N Blue Gum St",
                "city": "New Orleans",
                "county": "Bridgepoort",
                "state": "LA",
                "zip": 70116,
                "phone1": "504-621-8927",
                "phone2": "504-845-1427",
                "email": "jbutt@gmail.com",
                "web": "http://www.bentonjohnbjr.com"
            },
            {
                "id": 12,
                "first_name": "Josephine",
                "last_name": "Darakjy",
                "company_name": "Chanay, Jeffrey A Esq",
                "address": "4 B Blue Ridge Blvd",
                "city": "Brighton",
                "county": "Livingston",
                "state": "MI",
                "zip": 48116,
                "phone1": "810-292-9388",
                "phone2": "810-374-9840",
                "email": "josephine_darakjy@darakjy.org",
                "web": "http://www.chanayjeffreyaesq.com"
            }
        ]);

        $scope.tabs = [{
            title: 'Issue List (0)'.replace("0", $scope.data1.length),
            url: 'tab1.html'
        }, {
            title: 'Corrected (0)'.replace("0", $scope.data2.length),
            url: 'tab2.html'
        }];

        $scope.currentTab = 'tab1.html';

        $scope.onClickTab = function (tab) {
            $scope.currentTab = tab.url;
        }

        $scope.isActiveTab = function (tabUrl) {
            return tabUrl == $scope.currentTab;
        }

        $scope.changedata = function () {
            $scope.data1.pop();
            $scope.data2.pop();
            console.log($scope.data1.length);
            console.log($scope.data2.length);
        }
    }]);

现在，当您第一次加载页面时，此功能正常。现在点击按钮（＆＃34;检查＆＃34;按钮），我正在修改数组。我应该怎么做才能使标签标题始终与数组的长度同步？我尝试过可观察的对象，但除非我在视图中使用绑定，否则它们只会通知事件。除了处理可观察数组的更改事件之外没有其他办法吗？

Answer 1

你可以在$ scope.changedata函数中复制这段代码。

 $scope.tabs = [{
            title: 'Issue List (0)'.replace("0", $scope.data1.length),
            url: 'tab1.html'
        }, {
            title: 'Corrected (0)'.replace("0", $scope.data2.length),
            url: 'tab2.html'
        }];

它也在外面。

将范围属性绑定到选项卡标题

1 个答案: