0
我的工作角项目，我有填充来自服务器的API元素表。该表应该具有与模板相同的行的替代颜色。但是，在我的情况是完全灰色的，我需要帮助来解决这个问题。 此表是2列表后果合并了一次，我认为这会导致错误。AngularJS 1.3：表视图中显示不正常
在HTML我试图把NG重复该行，而不是身体如何期待的权利，但引起我行打算应用或朝下点击了激活按钮时。这些行根本就没有固定在动作发生的位置。所以，我决定把NG重复在TBODY代替。
我正在寻找一个更好的解决方案来维护表格作为原始模板，并仍然具有相同的功能。我想我应该在ctrl中做一些事情，但我仍然不知道应该做哪些修改。
正在共享的表，控制器的代码和表中的屏幕截图：
表：
<div ng-show="analyticsEmailSettings.subscribed">
<!--|| Table Start For Subcribed WebSites ||-->
<table ng-table="tableParams" template-pagination="/js/directives/termstable/pagination.html" class="table full-width no-border" id="tableEnginesMyaccount">
<thead>
<tr>
<th class="width-635">
{{ 'engine_step1_name' | translate }}
</th>
<th class="width-30">
{{ 'user_settings_emailStatistics_weekly' | translate }}
</th>
<th class="width-30">
{{ 'user_settings_emailStatistics_monthly' | translate }}
</th>
</tr>
</thead>
<tbody ng-repeat="websites in engines | orderBy:'name'">
<!--!loading && $data.length-->
<tr class="tr-active" ng-if="websites.type == 'WeeklyAnalytics' || websites.type == 'MonthlyAnalytics'">
<td colspan="" class="list__item--action-menu" ng-mouseover="isActive=true" ng-mouseleave="isActive=false">
{{websites.name}}
<span class="float-right">
<button class="button button--primary button--delete" ng-click="removeEngineFromSubscriptionServer(websites)"> <!-- enableDisable(websites) -->
<i class="fa fa-trash-o"></i>
</button>
</span>
</td>
<td class="td-with-button center valign-top">
<span class="cursor-pointer" ng-click="updateEngineToSubscription(websites,'WeeklyAnalytics')">
<i class="icon--big fa" ng-class="{'fa-check-circle-o' : websites.type == 'WeeklyAnalytics', 'fa-circle-o' : websites.type != 'WeeklyAnalytics'}"></i>
</span>
</td>
<td class="td-with-button center valign-top">
<span class="cursor-pointer" ng-click="updateEngineToSubscription(websites,'MonthlyAnalytics')">
<i class="icon--big fa" ng-class="{'fa-check-circle-o' : websites.type == 'MonthlyAnalytics', 'fa-circle-o' : websites.type != 'MonthlyAnalytics'}"></i>
</span>
</td>
</tr>
<tr class="tr-no-active" ng-if="websites.type != 'WeeklyAnalytics' && websites.type != 'MonthlyAnalytics'">
<td colspan="" class="txt-no-active">
{{websites.name}}
</td>
<td class="td-with-button center valign-top" colspan="2">
<button class="button button--primary button--enable" ng-click="addEngineToSubscription(websites)"> <!-- enableDisable(websites) -->
<i class="fa fa-check"></i>
<!--enable-->
</button>
</td>
</tr>
</tbody>
<!-- No Content -->
<tbody ng-show="engines.length == 0">
<tr>
<td colspan="4" class="center">
<h3>
{{ 'statistic_table_footer_no_data' | translate }}
</h3>
</td>
</tr>
</tbody>
</table>
<!--|| Table End ||-->
</div>
控制器：
searchApp.controller('UserSettingsCtrl', ['$scope', '$q', 'aiStorage', 'userConfig', 'UserSettingsService', 'WebsiteSource', 'AnalyticsEmailService', 'toaster', '$translate', '$timeout',
function ($scope, $q, store, userConfig, UserSettingsService, WebsiteSource, AnalyticsEmailService, toaster, $translate, $timeout) {
$scope.groupBy = function (key) {
return $scope.subscriptionEngines.filter(function (obj) {
return obj.type == key;
})
}
$scope.init = function() {
$scope.availableLanguages = {
da: 'Dansk',
en: 'English',
sv: 'Svensk'
};
$scope.userInfo = store.get('user');
$scope.loadingAction = false;
$scope.selectFlag = false;
$scope.subscriptionEnginesFromServer = [];
$scope.subscriptionEngines = [];
$scope.analyticsEmailSettings = {};
$scope.engines = angular.copy(WebsiteSource.sites);
AnalyticsEmailService.getUserSubscription().then(
function success(response) {
$scope.loadingAction = false;
$scope.subscription = response;
console.log('response.data', response.data)
$scope.subscriptionEnginesFromServer = populateSubscribedEnginesFromServer(response.data);
$scope.analyticsEmailSettings.subscribed = (response.data.length > 0);
},
function error() {});
}
function populateSubscribedEnginesFromServer(data) {
//console.log('data', data)
var subscriptionEngines = [];
for (var i = 0; i < data.length; i++) {
var subscription = data[i];
var engine = $scope.engines.filter(function (x) {
if (x.id === subscription.engine) {
var index = $scope.engines.indexOf(x);
//debugger
//Added type
$scope.engines[index].type = subscription.type;
}
return x.id === subscription.engine;
})[0];
console.log('engine', engine);
if (engine) subscription.name = engine.name;
subscriptionEngines.push(subscription);
}
console.log('subscriptionEngines', subscriptionEngines)
return subscriptionEngines;
}
$scope.save = function() {
$scope.loadingAction = true;
if ($scope.analyticsEmailSettings.subscribed) {
// var putArray = [];
//debugger;
for (var i = 0; i < $scope.subscriptionEngines.length; i++) {
var obj = {
"type": $scope.subscriptionEngines[i].type,
"engine": $scope.subscriptionEngines[i].id || $scope.subscriptionEngines[i].engine,
"title": $scope.subscriptionEngines[i].name,
"name": $scope.subscriptionEngines[i].name
};
$scope.subscriptionEnginesFromServer.push(obj);
}
//debug
//console.log('putArray', putArray)
AnalyticsEmailService.updatesubscriptions($scope.subscriptionEnginesFromServer, function success(response) {
}, function error() {});
$timeout(function() {
AnalyticsEmailService.getUserSubscription().then(
function success(response) {
$scope.loadingAction = false;
$scope.subscription = response;
//console.log('response.data', populateSubscribedEnginesFromServer(response.data))
// $scope.subscriptionEnginesFromServer = populateSubscribedEnginesFromServer(response.data);
$scope.analyticsEmailSettings.subscribed = (response.data.length > 0);
//debugger
},
function error() {});
}, 1000)
} else {
AnalyticsEmailService.unsubscribe($scope.analyticsEmailSettings.subscription, function success(response) {}, function error() {});
}
UserSettingsService.save({
userId: $scope.userInfo.id
}, $scope.userInfo, function() {
$scope.loadingAction = false;
userConfig.setCurrentUserConfig($scope.userInfo);
userConfig.setUserLocale();
store.set('user', $scope.userInfo);
toaster.pop({
type: 'success',
body: $translate.instant('notifications_user_settings_changed_success')
});
}, function() {});
$scope.subscriptionEngines = [];
};
//removeSelectedEngines
$scope.getUnselectedEngines = function() {
if (!$scope.engines)
return [];
var unselectedEngines = [];
for (var i = 0; i < $scope.engines.length; i++) {
if ($scope.subscriptionEnginesFromServer.filter(function (x) {
return x.engine === $scope.engines[i].id;
}).length == 0)
unselectedEngines.push($scope.engines[i]);
}
//All engines
return unselectedEngines;
}
$scope.addEngineToSubscription = function (engine) {
$scope.subscriptionEngines = [];
var index = $scope.engines.indexOf(engine);
//debugger
$scope.engines[index].type = "WeeklyAnalytics";
engine.type = "WeeklyAnalytics";
$scope.subscriptionEngines.push(engine);
$scope.save();
}
$scope.updateEngineToSubscription = function (engine, type) {
$scope.subscriptionEngines = [];
var index = $scope.engines.indexOf(engine);
//debugger
$scope.engines[index].type = type;
for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) {
if ($scope.subscriptionEnginesFromServer[i].engine == engine.id) {
//Added Type
$scope.subscriptionEnginesFromServer[i].type = type;
break;
}
}
$scope.save();
}
$scope.removeEngineFromSubscriptionServer = function (engine) {
$scope.subscriptionEngines = [];
var index = $scope.engines.indexOf(engine);
//debugger
$scope.engines[index].type = '';
for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) {
if ($scope.subscriptionEnginesFromServer[i].engine == engine.id) {
$scope.subscriptionEnginesFromServer.splice(i, 1);
break;
}
}
$scope.save();
}}]);
截图：
screenshot of the table - notice it is not color alternate of the rows
喜，谢谢你。但在与我的CTO讨论之后。他说，我将能够修改控制器，其中2个功能关心用户界面以及服务器的内容。他说我应该有一个清单，并对其进行操作。我的项目在服务器中没有激活，我点击按钮保存到服务器后激活它。我需要弄清楚如何根据我所拥有的循环和过滤器来制作这个列表，这是我收到的输入。 – Jakub
创建其他的问题，我们可以帮助 –
嗨，我用你的想法别的东西。所以是有用的:) 顺便说一句，我解决了这个问题，重建控制器和合并一些方法融入其中。我最终将控制器中的2个列表合并在一起。 – Jakub