Angular (1.x) - 从代码中以编程方式访问 NG-REPEAT答案

【问题标题】：Angular (1.x) - Programmatically access NG-REPEAT from codeAngular (1.x) - 从代码中以编程方式访问 NG-REPEAT
【发布时间】：2021-09-14 16:34:30
【问题描述】：

我正在尝试为仍然使用 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>

【问题讨论】：

您可以查看以下链接中的示例。 ciphertrick.com/…
@ThomsonMixab 我已经在这样做了，除非我错过了该博客中的某些内容。我想要做的是能够选择 from 外部 ng-repeat 本身的行之一。就像我的示例有一个按钮可以选择 ng-repeat 中的第一项，但我不知道如何从 ng-repeat 之外获取该对象。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

您可以通过将数组中的实际对象设置为 selectedRow 而不是使用 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]);
};

Working plunker

【讨论】：

谢谢，效果很好。我将其更改为 indexOf(curr) 而不是 findIndex 因为我们使用的是带有打字稿的 ES5，但总的来说它让我走上了正确的轨道并确实解决了这个问题。谢谢:)

【解决方案2】：

这是测试工作示例的链接。

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

【讨论】：

这会破坏“下一个”按钮，因为它不能再与下一个/上一个兄弟对象一起使用。不过有帮助:)