I have problem, when i create angualrjs tabs ui dynamically, the ng repeat will keep call select event function recursive and Pass county IDs and Call the Web API to get data. just want to ask for solution to stop ng repeat from passing county IDs and make API call? View
<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>
javascript
(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]);
}());
Aucun commentaire:
Enregistrer un commentaire