Angular(1.x)-通过代码编程访问NG-REEAT

Question

我正在尝试为一个仍然使用angular 1.x的旧项目设置热键，我试图添加的功能之一是从使用NG-REPEAT创建的表中选择第一行。我已经能够添加其他功能，例如向上/向下移动所选行，因为我在ng-click="setSelected(this)"上传入所选行后，可以保存该行并使用selectedRow.$$prevSibiling或selectedRow.$$nextSibiling移动它。

我很难弄清楚如何从控制器设置selectedRow。

这里有一个快速的例子：

http://plnkr.co/edit/6jPHlYwkgF5raRWt?open=lib%2Fscript.js

JS:

App.controller('ActivitiesCtrl', [function() {
var vm = this;
vm.selectedRow = "Not set";
vm.activities = [
{
"id": 1,
"code": "ABC",
"person": "Joe"
},
{
"id": 2,
"code": "DFF",
"person": "Sally"
},
{
"id": 3,
"code": "ABC",
"person": "Sue"
},
{
"id": 4,
"code": "124",
"person": "Sam"
},
];
vm.setSelected = function(row) {
vm.selectedRow.selected = false;
vm.selectedRow = row;
vm.selectedRow.selected = true;
}
vm.moveNext = function() {
vm.setSelected(vm.selectedRow.$$nextSibling)
}
vm.setFirst = function() {
vm.setSelected("How do I set it...");
// How to set it? vm.setSelected(?????)
}
}]);

HTML:

<div ng-controller="ActivitiesCtrl as vm">
<table>
<thead>
<th>Id</th>
<th>Code</th>
<th>Person</th>
</thead>
<tbody>
<tr ng-repeat="activity in vm.activities track by activity.id" ng-click="vm.setSelected(this)" ng-class="{info: selected}">
<td>{{activity.id}}</td>
<td>{{activity.code}}</td>
<td>{{activity.person}}</td>
</tr>
</tbody>
</table>
{{vm.selectedRow | json}}
<hr />
<button ng-click="vm.setFirst()">Set First</button>
<button ng-click="vm.moveNext()">Next</button>
</div>

Answer 1

您可以通过将数组中的实际对象设置为selectedRow而不是使用this来实现这一点，并通过检查ng类中是否存在selectedRow === activity来设置类。

这种方法不需要改变对象

<tr
ng-repeat="activity in vm.activities track by activity.id"
ng-click="vm.setSelected(activity)"
ng-class="{info: vm.selectedRow == activity}"
>

然后，您可以使用Array#findIndex((获取数组中当前selectedRow索引，如果存在下一个索引，请使用它或返回第一个索引。

对于setFirst()，您只需使用vm.activities[0]

vm.selectedRow = null;
vm.setSelected = function (row) {     
vm.selectedRow = row;     
};
vm.moveNext = function () {
const {selectedRow:curr, activities:act} = vm;
if (curr !== null) {
let idx = act.findIndex(e => e == curr) + 1;
let next = act[idx] || act[0];        
vm.setSelected(next);
}      
};
vm.setFirst = function () {
vm.setSelected(vm.activities[0]);
};

工作柱塞

Answer 2

下面是测试工作示例的链接。

enter code here 
http://plnkr.co/edit/7mTvRB0ZlHOQwOIc?preview