Question

这是一个plnkr：https://plnkr.co/edit/bJ6LSR7fAY9mlvqBzDUw?p=preview

我正在使用uib-button-radio元素在ng-repeat上切换活动过滤器。

  <div ng-controller="ButtonsCtrl as $ctrl">
    <h4>Radio</h4>
    <pre>Model: {{$ctrl.radioModel}}</pre>
    <div class="btn-group">
      <label class="btn btn-primary" ng-change="$ctrl.do()" ng-model="$ctrl.radioModel" uib-btn-radio="'Left'">Left</label>
      <label class="btn btn-primary" ng-change="$ctrl.do()" ng-model="$ctrl.radioModel" uib-btn-radio="'Middle'">Middle</label>
      <label class="btn btn-primary" ng-change="$ctrl.do()" ng-model="$ctrl.radioModel" uib-btn-radio="'Right'">Right</label>
    </div>

    <p ng-repeat="item in $ctrl.filtered = ($ctrl.collection | filter: { Value: $ctrl.radioModel } )">{{item | json}}</p>

    <p>First filtered item: {{$ctrl.active | json}}</p>

ng-change / ng-click功能：

  ctrl.do = function() {
    ctrl.active = ctrl.filtered[0];
  }

当所选过滤器更改，随后更新集合时，我想选择过滤集合中的第一个项目。但是，似乎ng-change / ng-click函数在过滤器更新集合之前触发。

Answer 1

您可以做的是在JavaScript中而不是在标记中应用过滤逻辑。

在HTML中，将ng-repeat表达式更改为：

<p ng-repeat="item in $ctrl.filtered">{{item | json}}</p>

在控制器中，注入$filter：

angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope, $filter) {

初始化过滤后的数组：

ctrl.filtered = [];

在do更改处理程序中进行过滤：

ctrl.do = function() {
    ctrl.filtered = $filter('filter')(ctrl.collection, { Value: ctrl.radioModel });
    ctrl.active = ctrl.filtered[0];
}

单击uib-button-radio元素

1 个答案: