javascript - AngularJS : save a clicked action of the selected row in 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

更好的处理方法是使用一个字段来表示超链接的真或假，单击时将其设置为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>