AngularJS：点击显示新的额外行并隐藏所有其他行？

Question

我有一个html表格，<tbody>生成的角度为ng-repeat。这是我的HTML：

<tbody>
    <tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="activeRow = car.name">
        <td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
        <td>{{car.review}}</td>
        <td>{{car.rating}}</td>
        <td>{{car.fiveStarPercent}}</td>
        <td>{{car.recommended}}</td>
        <td>{{car.price}}</td>
    </tr>
    <tr ng-repeat-end ng-show="activeRow==car.name">
        <td>{{car.name}}</td>
    </tr>
</tbody>

当您点击该行时，我需要这样做，新行显示，但当您点击另一行时，我需要隐藏第一行。

以下是带有活动行的浏览器中的表：

我尝试使用ng-show这样做：

ng-show="activeRow==car.name"

activeRow是我控制器内的$scope变量。问题是，新行显示，但是当你点击另一行时不会隐藏。

我该如何解决？

Answer 1

您需要为activeRow变量提供命名空间，因为ng-repeat有自己的范围。

<div ng-app="app" ng-controller="mainCtrl as main">
  <table class="table table-striped table-bordered">
    <tbody>
        <tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="main.activeRow = car.name">
            <td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
            <td>{{car.review}}</td>
            <td>{{car.rating}}</td>
            <td>{{car.fiveStarPercent}}</td>
            <td>{{car.recommended}}</td>
            <td>{{car.price}}</td>
        </tr>
        <tr ng-repeat-end ng-show="main.activeRow==car.name">
            <td colspan="6">{{car.name}}</td>
        </tr>
    </tbody>
  </table>
</div>

使用"controller as"技术进行演示：http://codepen.io/Chevex/pen/KAmFB

此技术在功能上与在控制器中执行此操作相同：

app.controller('mainCtrl', function ($scope) {
    $scope.main = this;
    this.activeRow = "Lightning McQueen";
});

Angular允许ng-controller定义中的“as”语法作为在作用域上创建引用控制器函数的执行上下文（this）的命名空间的简单快捷方式。这是一种创建命名空间的好方法，无需创建随机无意义的对象，例如$scope.model = { ... };。

Answer 2

由于ng-repeat指令创建了一个新范围，并且activeRow属性位于父控制器范围内，因此您必须将该属性封装在对象中。这样，范围的原型继承将按预期工作。

在控制器上：

$scope.model = { activeRow: 'someValue' };

在HTML上：

ng-show="model.activeRow == car.name"

有关原型继承的更多信息here。