单击 uib-button-radio 元素时在更新模型之前触发 ng-change 指令

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];
  }

当 selected 过滤器发生变化并随后更新集合时，我想 select 过滤集合中的第一项。但是，似乎 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 元素时在更新模型之前触发 ng-change 指令

ng-change directive triggered before model is updated when clicking uib-button-radio element

angularjs

angular-ui-bootstrap