在 angularjs 中，我有一个过滤的单选按钮列表，想选择第一个？

Question

我有一个正在显示的图层列表：

<tr ng-repeat="row in layers | filter:isActive | orderBy:row.name">
    <td><input type="radio" id="{{ 'layerOption-' + row.key }}" name="layerOptions" ng-checked="row.checked" /></td>
    <td>{{ row.name }}</td>
    <td></td>
</tr>

我通过以下方式获取列表：

$scope.isActive = function(layer) { return layer.zoned === $scope.showZonedLayers; };

$scope.layers = values.layers.map(function(item, key) { return { 
    key: key, 
    name: item, 
    checked: key === 0 ? true : false, 
    zoned: item.indexOf("Zones") > 0
} });

这将设置列表集中的第一个元素，但这可以被过滤器过滤掉。如何将第一个未过滤/可见的单选框设置为选中？

这可以通过过滤器完成吗？如果不是，那么 Angular 与 jquery grep 的等价物是什么？

Answer 1

哇，我喜欢棱角分明的。找到了一个非常简单的解决方案：

ng-checked="{{$first}}"

会处理的。而且我可以去掉数组上的checked属性。

更新：

设置 ng-checked=$first 不会更新绑定值，因此它有点没用，因为您无法查询所选值。我重写了我的代码以转储过滤器并改为在代码中执行：

$scope.layers = values.layers.map(function(item, key) { return { 
    key: key, 
    name: item, 
    zoned: item.indexOf("Zones") > 0
} }).filter(function(item) { return item.zoned === $scope.showZonedLayers; });

但这意味着我必须在绑定到$scope.showZonedLayers 的复选框上进行 ng-change 回调。只是想知道是否有更优雅的方式？

Answer 2

你应该可以简单地使用：

ng-checked="$first"