ng-class 在 table 的第一行有 class 并在 ng-click 上将其删除

Question

我正在使用 angular js 来显示一个 table。当页面加载时，我希望突出显示 table 的第一行，然后当您单击 table 的另一行时，我想删除突出显示的 class。

我设法使用

将 class 添加到第一行

 ng-class="{'selected-row':$first}"

但后来我无法删除它。我希望能够像这样从 $scope 传递一个变量，这样我就可以在单击时更改值...

控制器....

 $scope.changeClass = function(){
  if ($scope.myClass === "selected-row"){
    $scope.myClass = "off";
    window.alert('change class here to remove highlight!!!');
  } else {
    $scope.myClass = "selected-row";
    window.alert('change it back!!');
  }

html.....

 <tr ng-repeat="row in $data" ng-click="changeClass()" ng-class="{myClass:$first}">

这行不通，我想不出语法（如果可能的话！！）有什么想法吗？

笨蛋在这里：https://plnkr.co/edit/Zs1r6DQcc3vaUDjzkUh8?p=preview

Answer 1

您可以使用 ng-class 和一个跟踪行索引的数组来实现此目的

// Code goes here
var app = angular.module('ngTableApp', ['ngTable'])
          .controller('selectFilterController', function($scope, $filter, $q, NgTableParams) {
            var data = [{name: "Moroni", age: 50},
                        {name: "Tiancum", age: 43},
                        {name: "Jacob", age: 27},
                        {name: "Nephi", age: 29},
                        {name: "Enos", age: 34},
                        {name: "Tiancum", age: 43},
                        {name: "Jacob", age: 27},
                        {name: "Nephi", age: 29},
                        {name: "Enos", age: 34},
                        {name: "Tiancum", age: 43},
                        {name: "Jacob", age: 27},
                        {name: "Nephi", age: 29},
                        {name: "Enos", age: 34},
                        {name: "Tiancum", age: 43},
                        {name: "Jacob", age: 27},
                        {name: "Nephi", age: 29},
                        {name: "Enos", age: 34}
                    ];


    $scope.class = "selected-row";
    $scope.changeClass = function(index){
     $scope.selected=[];  
     $scope.selected[index]=true;
    };
    $scope.changeClass(0); 
            $scope.names = [{id: "", title: ""}, {id: 'Moroni', title: 'Moroni'}, {id: 'Enos', title: 'Enos'}, {id: 'Nephi', title: 'Nephi'}];
            $scope.tableParams = new NgTableParams({page: 1, count: 10}, {data: data});
            
          })

/* Styles go here */
.selected-row{
  border:solid purple 3px;
}

.off{
  border:none;
}

.table-striped > tbody > tr:hover{
  border:solid purple 3px;
}

.table-striped > tbody > tr:active{
  border:solid purple 3px;
}


.table-striped > tbody > tr:focus{
  border:solid purple 3px;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://code.angularjs.org/1.3.7/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="ngTableApp">
    <h1>NgTable with select filters</h1>
    <div ng-controller="selectFilterController">
      <table ng-table="tableParams" class="table table-striped ng-scope ng-table" show-filter="true">
        <tbody>
          <tr ng-repeat="row in $data" ng-click="changeClass($index)"  ng-class="{'selected-row':selected[$index]}">
          <!--<tr ng-repeat="row in $data" ng-click="changeClass()" ng-class="{myClass:$first}">  -->
            <td data-title="'Name'" filter="{name: 'select'}" filter-data="names" sortable="'name'">{{ row.name }}</td>
            <td data-title="'Age'" filter="{age: 'text'}" sortable="'age'">{{ row.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

Answer 2

我已将您的 ng-repeat 调整为按 $index 跟踪每个项目。首先，我们将使用以下行将活动行索引设置为 0：

$scope.activeRow = 0

然后在某一行的点击事件中，我们将激活行设置为当前点击的行：

$scope.setActive = (index) => {
  $scope.activeRow = index;
}

然后查看需要突出显示的行，在您的 ng-class 中调用以下函数让奇迹发生：

$scope.isActive = (index) => {
  return $scope.activeRow === index; 
}

工作 plunker：https://plnkr.co/edit/OMpcDg5V8TVHkxHUIXUQ?p=preview

ng-class 在 table 的第一行有 class 并在 ng-click 上将其删除

ng-class have class on first row of table and remove it on ng-click

javascript

css

angularjs

angularjs-ng-click

ng-class