【发布时间】：2015-03-24 04:18:58
【问题描述】：
我有 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]);
}());
【问题讨论】：
-
旁注 - 你的 HTML 和控制器代码看起来真的很大。它可能应该被分解成指令。
-
@DavidGrinberg 我知道我的 HTML 很大，但它现在只是原型，我会尽快分解它，我完成了这个概念
-
这是一个错误的决定。了解如何使用指令并从一开始就使用它们。从长远来看，它会带来回报。
-
你能创建一个 plnkr/fiddle 吗？
标签： javascript angularjs angularjs-directive tabs angular-ui