Question

我有2个标签菜单，第一个是动态创建的，第二个是第一个标签是静态的，其他是动态创建的，使用ng重复我的排序是如何使第二个菜单标签上的第一个静态标签选择用户从第一个标签中选择的内容？我使用设置有效但仍然无法正常工作

html

            <tabset>
                <tab ng-repeat="tab in countytabs" heading="{{tab.countyName}}" select="selectAllUserByCounty(tab.countyID)">
                    <h3>{{tab.countyName}}--{{tab.phoneNumber}} </h3>
                    <tabset>
                        <tab heading="All" active="active.all" select="selectAllUserByCounty(tab.countyID)">
                            <br />
                            <span>Total:{{totalStatusforByCounty.total}}, In:{{totalStatusforByCounty.in}}, Out:{{totalStatusforByCounty.out}}, Unknown: {{totalStatusforByCounty.unknown}} at {{totalStatusforByCounty.lastUpdatedDateTime | date:"MM/dd/yyyy 'at' h:mma"}} </span>
                            <br />
                            <div ng-repeat="groupUsers in allUserByCounty">
                                <h6>
                                    <b>{{groupUsers.title}}</b>
                                </h6>
                                <table ng-repeat="user in groupUsers.users">
                                    <tr>
                                        <td>{{user.firstName}} {{user.lastName}} Ext:{{user.voiceMailExt}} </td>
                                    </tr>
                                </table>
                            </div>
                        </tab>
                        <tab ng-repeat="departmentGroup in departmentGroups" heading="{{departmentGroup.name}}" select="selectAllUserByCountyAndDepartmentGroup(tab.countyID,departmentGroup.id)">
                            {{departmentGroup.name}}<br />
                            {{tab.countyID}}<br />
                            {{departmentGroup.id}}<br />

                            <div>
                                <p>
                                    <span>
                                        Total:{{totalStatusforByCountyAndDepartmentGroup.total}}, In:{{totalStatusforByCountyAndDepartmentGroup.in}}, Out:{{totalStatusforByCountyAndDepartmentGroup.out}}, Unknown: {{totalStatusforByCountyAndDepartmentGroup.unknown}} at {{totalStatusforByCountyAndDepartmentGroup.lastUpdatedDateTime | date:"MM/dd/yyyy 'at' h:mma"}}
                                    </span>
                                </p>
                            </div>

                            <div ng-repeat="groupUsers in allUserByCountyAndDepartmentGroup">
                                <h6>
                                    <b>{{groupUsers.title}}</b>
                                </h6>
                                <table ng-repeat="user in groupUsers.users">
                                    <tr>
                                        <td>{{user.firstName}} {{user.lastName}} Ext:{{user.voiceMailExt}} </td>
                                    </tr>
                                </table>
                            </div>
                        </tab>
                    </tabset>
                </tab>
            </tabset>
        </div>

我的控制器

(function(){
    'use strict';

    var app = angular.module('usersboard');

    var ReceptionController = function($scope, ReceptionService){

        $scope.countytabs = '';
        $scope.totalStatusforAllCounties ='';
        $scope.totalStatusforByCounty = '';
        $scope.departmentGroups = '';
        $scope.totalStatusforByCountyAndDepartmentGroup = '';
        $scope.allUserByCountyAndDepartmentGroup = '';
        $scope.allUserByCounty = '';
        $scope.AllUserInAllDepartmentGroupsGroupByCounties = '';
        $scope.AllUsersInDepartmentGroup= '';
        $scope.active = {
            all: false
        };
        $scope.content = 'county';
        $scope.isShown = function (content) {
            return content === $scope.content;
        };

        var selectAllCounties = function(){
            ReceptionService.selectAllCounties().then(function(data){
                $scope.countytabs = data;

            }, function(errMsg){
                console.log(errMsg);
            });
        }
        selectAllCounties();

        var selectTotalStatusforAllCounties = function(){
            ReceptionService.selectTotalStatusforAllCounties().then(function(data){
                $scope.totalStatusforAllCounties = data;
                console.log(data);
            }, function(errMsg){
                console.log(errMsg);
            });
        }
        selectTotalStatusforAllCounties();

        var selectAllDepartmentGroups = function(){
            ReceptionService.selectAllDepartmentGroups().then(function (data) {
                $scope.departmentGroups = data;
                console.log(data);
            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        selectAllDepartmentGroups();

        $scope.selectTotalStatusforByCounty = function (id) {
            if (typeof id !== 'undefined'){
                ReceptionService.selectTotalStatusforByCounty(id).then(function (data) {
                    $scope.totalStatusforByCounty = data;
                    console.log($scope.totalStatusforByCounty);
                }, function (errMsg) {
                    console.log(errMsg);
                });
            }

        }
        $scope.selectTotalStatusforByCountyAndDepartmentGroup = function (countyId, departmentGroup) {
            ReceptionService.selectTotalStatusforByCountyAndDepartmentGroup(countyId, departmentGroup).then(function (data) {
                $scope.totalStatusforByCountyAndDepartmentGroup = data;
                console.log($scope.totalStatusforByCountyAndDepartmentGroup);
            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUserByCountyAndDepartmentGroup = function (countyId, departmentGroup){
            $scope.selectTotalStatusforByCountyAndDepartmentGroup(countyId, departmentGroup);
            ReceptionService.selectAllUserByCountyAndDepartmentGroup(countyId, departmentGroup).then(function (data) {
                $scope.allUserByCountyAndDepartmentGroup = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUserByCounty = function (countyId) {

                $scope.selectTotalStatusforByCounty(countyId);
                ReceptionService.selectAllUserByCounty(countyId).then(function(data){
                    $scope.allUserByCounty = data;


                }, function(errMsg){
                    console.log(errMsg);
                });

        }

        $scope.selectAllUserInAllDepartmentGroups = function () {

            ReceptionService.selectAllUserInAllDepartmentGroups().then(function (data) {
                $scope.AllUserInAllDepartmentGroupsGroupByCounties = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUsersInDepartmentGroups = function (departmentGroupId) {

            ReceptionService.selectAllUsersInDepartmentGroup(departmentGroupId).then(function (data) {
                $scope.AllUsersInDepartmentGroup = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }


    };

    app.controller('ReceptionController', ['$scope', 'ReceptionService', '$window', ReceptionController]);

}());

Answer 1

单击父选项卡时，将变量（在我的示例中为tab.activate1）设置为true。然后，使用该值激活第一个子选项卡：

<tabset>
<tab ng-repeat="tab in countytabs" ng-click="tab.activate1 = true" heading="{{tab.countyName}}">
  <h3>{{tab.countyName}}--{{tab.phoneNumber}} </h3>
  <tabset>
    <tab heading="All" active="tab.activate1"></tab>
    <tab heading="Detail 1"></tab>
    <tab heading="Detail 2"></tab>
  </tabset>
</tab>
</tabset>

这是一个有效的演示：http://plnkr.co/edit/Wcs2hdVtem5b2gzbCy5L?p=preview

如何在第二个菜单选项卡上选择第一个静态选项卡，用户从第一个选项卡中选择哪个？

1 个答案: