AngularJS：在 ng-repeat 中保存所选行的单击操作

Question

总结：

我有一个 array of objects 显示在 ng-repeat 列表中。每个对象具有三个属性id、name 和age。 name 字段是可点击的。

要求：

一旦用户点击了name 字段，<a> 标记应从表中删除，以针对已点击的特定记录。

假设我点击了Alpha，那么应该从该字段中删除链接。

问题陈述：

假设用户之前点击了Alpha，现在他将点击Beta。然后Alpha字段的状态再次变为之前的状态（<a>标签已添加）。

一旦<a> 标记被删除，就不应再为该特定字段添加它。

我试过了：

var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

$scope.people = [
    {
    id: 1,
    name: "Alpha",
    age: "24"
    },
{
    id: 2,
    name: "Beta",
    age: "25"
    }
];

$scope.removeLink = function(index) {
  $scope.rowIndex = index;
};

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PeopleCtrl">
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td ng-show="rowIndex != $index">
        <a href="" ng-click="removeLink($index)">{{person.name}}         </a>
        </td>
        <td ng-show="rowIndex == $index">
          {{person.name}}
        </td>
        <td>{{person.age}}</td>
    </tr>
</table>
</div>

Answer 1

更好的处理方法是设置一个 field 以使超链接为真或假，点击后使其变为 true，

演示

var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

$scope.people = [
    {
    id: 1,
    name: "Alpha",
    age: "24",
    clicked : false
    },
{
    id: 2,
    name: "Beta",
    age: "25",
    clicked : false
    }
];

$scope.removeLink = function(person) {
 person.clicked = true;
};

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PeopleCtrl">
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td ng-if="!person.clicked">
        <a href="" ng-click="removeLink(person)">{{person.name}}         </a>
        </td>
        <td ng-if="person.clicked">
          {{person.name}}
        </td>
        <td>{{person.age}}</td>
    </tr>
</table>
</div>