![](/img/trans.png)
[英]Angular 1.x ng-repeat shows data while straight template binding doesn't display
[英]Angular (1.x) - Programmatically access NG-REPEAT from code
我正在嘗試為仍然使用 angular 1.x 的舊項目設置熱鍵,我嘗試添加的功能之一是從使用NG-REPEAT
創建的表中選擇第一行。 我已經能夠添加其他功能,例如向上/向下移動所選行,因為我在ng-click="setSelected(this)"
上傳入所選行,然后讓我保存該行並使用selectedRow.$$prevSibiling
移動它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>
這是帶有測試工作示例的鏈接。
enter code here
http://plnkr.co/edit/7mTvRB0ZlHOQwOIc?preview
您可以通過將數組中的實際對象設置為 selectedRow 而不是使用this
來做到這this
並通過檢查 ng-class 中的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]);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.