我正在开发Angular项目，我在其中填充了一个表，其中包含来自服务器和API的元素。该表应具有从模板开始的行的备用颜色。但是，在我的情况下完全是灰色的，我需要帮助来解决这个问题。 这个表是2个列表合并一次的结果，我认为这会导致错误。
在HTML中，我尝试将 ng-repeat 放在行而不是正文上，现在看起来如何，但这会导致我的行在点击按钮时进入应用程序或向下激活它。这些行根本没有固定在行动发生的位置。所以，我决定将 ng-repeat 改为 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
答案 0 :(得分：0)
如果您正在寻找备用行颜色，那么您可以通过 $ even 和 $ odd 属性ng-repeat来完成
<tr ng-repeat-start="websites in engines | orderBy:'name' track by $index" ng-class="{'odd-row': $odd, 'even-row': $even}"">
我正在使用even-row而odd-row是类名