如何将 table 的第一行设置为使用 AngularJS 加载页面上的默认 selectedRow？

Question

我有一个 table 使用 AngularJS:

<table class="table" style="font-size:0.9em">
<tr>
<th><a href="" ng-click="sortField = 'FirstName'; reverse = !reverse">FirstName</a></th>
<th><a href="" ng-click="sortField = 'LastName'; reverse = !reverse">LastName</a>     
</th>
<th><a href="" ng-click="sortField = 'Grade'; reverse = !reverse">Grade</a></th>
<th><a href="" ng-click="sortField = 'Marks'; reverse = !reverse">Marks(%)<a></th>
</tr>
<tr ng-repeat="r in value | filter:query |  orderBy:'-Marks':reverse"ng-class-odd="'tableOdd'"
ng-class-even="'tableEven'"
ng-click="graph(r)"
ng-class="{tractive: r === selectedRow}" >
<td>{{r.FirstName}}</td>
<td>{{r.LastName}}</td>
<td>{{r.Grade}}</td>
<td>{{r.Marks}}</td>
</tr>
</table>

我需要将 table 的第一行设置为初始页面上的默认 selectedRow load.Also 我在 table.I 需要的点击事件上调用 graph() 函数在初始页面加载时执行 graph() 作为 well.Is 是否可以使用一些 Angular 指令来执行此操作？

Answer 1

这是一个很好的问题，因为它很好地说明了关注点分离的问题。

View 负责数据呈现和用户输入。它可以出于演示目的扩充数据（使用 Angular 表达式和过滤器），但应避免（在可能的情况下）定义 ViewModel。

Controller 负责以适应 View 的方式定义 ViewModel，但仍然与 View 无关。

所以，具体来说，你的问题。如果 table 的顺序更改了 ViewModel 的 "state" 并且不仅仅是为了演示目的，那么它应该在控制器中完成，而不是在视图中完成。换句话说，如果应用程序的功能受顺序影响，例如设置 selectedRow 或将所选行推进到下一行（这仅在过滤数组中有意义），则顺序和它的效果应该在控制器中完成。

app.controller("MainCtrl", function($scope, $filter){
  var data = getData();

  $scope.sortField = ""; // unsorted
  $scope.reverse = false;
  $scope.query = undefined; // unfiltered

  $scope.$watchGroup(["query", "sortField", "reverse"], function(){
    $scope.sortedValues = filterAndSort();

    // set the selected row after sorting
    $scope.selectedRow = $scope.sortedValues.length && $scope.sortedValues[0];
  });

  function filterAndSort(){
    var filtered = $filter("filter")(data, $scope.query);
    return $filter("orderBy")(filtered, $scope.sortField, $scope.reverse);
  }
});

HTML有点变化：

<table>
  <tr>
    ...
    <th>
      <a href="" ng-click="sortField = 'Marks'; reverse != reverse;">
        Marks(%)
      </a>
    </th>
  </tr>
  <tr ng-repeat="r in sortedValues" 
      ng-class="{tractive: r === selectedRow}">
     ...
  </tr>
</table>

如何将 table 的第一行设置为使用 AngularJS 加载页面上的默认 selectedRow？

how to set the first row of a table as the default selectedRow on page Load using AngularJS?

html

angularjs

angularjs-ng-repeat