Javascript ng类在表的第一行上有类，并在ng单击时将其删除

我使用angular js显示一个表。当页面加载时，我希望表格的第一行高亮显示，然后当您单击表格的另一行时，我希望删除hightlighted类

我已经成功地让它使用

 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}">  

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

---

Plunker here:

您可以使用

ng类

以及跟踪行索引的数组来实现此目的

//代码在这里
var app=angular.module（'ngTableApp'，['ngTable']））
.controller（'selectFilterController'，函数（$scope，$filter，$q，NgTableParams）{
变量数据=[{name:“Moroni”，年龄：50}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}
];
$scope.class=“所选行”；
$scope.changeClass=函数（索引）{
$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=新的NgTableParams（{page:1，count:10}，{data:data}）；
})

/*样式在这里*/
.选定行{
边框：纯色紫色3px；
}
.关{
边界：无；
}
.表格条带化>tbody>tr:悬停{
边框：纯色紫色3px；
}
.表格条带化>tbody>tr:激活{
边框：纯色紫色3px；
}
.表格带条纹>tbody>tr:焦点{
边框：纯色紫色3px；
}

带有选择过滤器的NgTable
{{row.name}
{{row.age}}

您可以使用

ng类

以及一个跟踪行索引的数组来实现此目的

//代码在这里
var app=angular.module（'ngTableApp'，['ngTable']））
.controller（'selectFilterController'，函数（$scope，$filter，$q，NgTableParams）{
变量数据=[{name:“Moroni”，年龄：50}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}
];
$scope.class=“所选行”；
$scope.changeClass=函数（索引）{
$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=新的NgTableParams（{page:1，count:10}，{data:data}）；
})

/*样式在这里*/
.选定行{
边框：纯色紫色3px；
}
.关{
边界：无；
}
.表格条带化>tbody>tr:悬停{
边框：纯色紫色3px；
}
.表格条带化>tbody>tr:激活{
边框：纯色紫色3px；
}
.表格带条纹>tbody>tr:焦点{
边框：纯色紫色3px；
}

带有选择过滤器的NgTable
{{row.name}
{{row.age}}

我已经调整了您的

ng repeat

以按$index跟踪每个项目。首先，我们将使用以下行将活动行索引设置为0：

$scope.activeRow = 0

然后在行的单击事件中，我们将活动行设置为当前单击的行：

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

然后，要查看需要突出显示哪一行，在

ng类中调用以下函数可以实现神奇的效果：

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

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

$scope.activeRow = 0

然后在行的单击事件中，我们将活动行设置为当前单击的行：

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

然后，要查看需要突出显示哪一行，在
ng类中调用以下函数可以实现神奇的效果：

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

工作冲击器：