我正在尝试为仍然使用angular 1.x的旧项目设置热键，我尝试添加的功能之一是从使用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>
2条答案
按热度按时间cgh8pdjw1#
可以通过将数组中的实际对象设置为selectedrow而不是使用
this并通过检查selectedRow === activity在ng课上。这种方法不需要改变对象
然后可以使用数组#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]);
};
z9ju0rcb2#
下面是与测试工作示例的链接。