Javascript AngularJS 1.3:表格视图显示不正确

我正在Angular项目中工作，在该项目中，我有一个由服务器API中的元素填充的表。表格的行颜色应与模板中的行颜色相同。然而，我的情况是完全灰色的，我需要帮助来解决这个问题。 这个表是两个列表合并在一起的结果，我认为这是导致错误的原因

在HTML中，我尝试将ng repeat放在行上，而不是现在的body how，但这会导致当单击按钮激活它时，我的行变为app或down。行并没有固定在动作发生的位置。因此，我决定将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>

{{'engine_step1_name'| translate}}
{{‘用户设置{电子邮件统计}每周{翻译}
{{‘用户设置{电子邮件统计}每月{翻译}
{{websites.name}
{{websites.name}
{{‘统计_表_页脚_无_数据|翻译}

控制器：

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();

}}]);

searchApp.controller（'UserSettingsCtrl'、['$scope'、'$q'、'aiStorage'、'userConfig'、'UserSettingsService'、'WebsiteSource'、'AnalyticsMailService'、'toaster'、'$translate'、'$timeout'，
函数（$scope、$q、store、userConfig、usersetings服务、WebsiteSource、AnalyticsEmailService、toaster、$translate、$timeout）{
$scope.groupBy=函数（键）{
返回$scope.subscriptionEngines.filter（函数（obj）{
返回obj.type==键；
})
}
$scope.init=函数（）{
$scope.availableLanguages={
da:‘丹斯克’，
嗯:"英语",，
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（）。然后(
功能成功（响应）{
$scope.loadingAction=false；
$scope.subscription=响应；
console.log（'response.data'，response.data）
$scope.subscriptionEnginesFromServer=填充SubscriptedEnginesFromServer（response.data）；
$scope.analyticsEmailSettings.subscribed=（response.data.length>0）；
},
函数错误（）{}）；
}
函数从服务器（数据）填充SubscribedEngines{
//console.log（'data'，data）
变量subscriptionEngines=[]；
对于（变量i=0；i <tr ng-repeat-start="websites in engines | orderBy:'name' track by $index" ng-class="{'odd-row': $odd, 'even-row': $even}"">