Question

我正在尝试根据引导下拉列表中的选择过滤列表，但似乎无法使其工作。这是我的代码：

<body>
  <div class="toolbar-wrapper" >
    <div class="btn-group container" role="group" ng-controller="filterController">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          {{filter}}
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li ng-repeat="severity in severityLevels"><a href="#" ng-click="changeSeverity(severity)">{{severity}}</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="logMessages" ng-controller="logController">
    <div >
    <ul>
      <li class="message" ng-repeat="logData in data | filter: filter  | limitTo: quantity">
        {{logData.timestamp}} : {{logData.severity}} : {{logData.message}}
      </li>
    </ul>
  </div>
  </div>
</body>

使用Javascript：

var app = angular.module('UnifyLog', []);

app.controller('filterController', function($scope) {
  $scope.severityLevels = [
    'ERROR',
    'WARN',
    'INFO',
    'DEBUG'
  ];

  $scope.filter = '';

  $scope.resetFilter = function() {
    $scope.filter = '';
  };

  $scope.changeSeverity = function(severity) {
    $scope.filter = severity;
  }

})
.controller('logController', function ($scope, $http) {

  $http.get("https://clock/settings/get_log_messages", {}).then(
      function (response) {
        $scope.data = response.data;
      },
      function (response) {
        console.log("fail:" + response);
      }
  );

  $scope.quantity=100
});

我知道你可以使用ng-model数据绑定select指令，但我想使用bootstrap下拉列表。

上面的代码是更新scope.filter变量，但日志消息列表不会过滤。

http请求返回一个包含消息，时间戳和严重性字段的日志数据对象的json数组。

Answer 1

尝试拨打$scope.apply()：

$scope.changeSeverity = function(severity) {
    $scope.filter = severity;
    $scope.apply()
}

在此处查看更多信息，并考虑另一种方法（使用真实数据绑定而不是自定义回调）：https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()

Answer 2

我会创建一个客户严重性过滤器，如下所示：

.filter('severityFilter', function () {
    return function (input, severity) {
        var out = [];
        if (input && input != []) {
            angular.forEach(input, function (thing) {
               if(thing.severity === severity){
                   out.push(thing);
               }
            });
        }
        return out;
    }
})

然后像这样应用：

ng-repeat =＆＃34;数据中的logData | severityFilter：severity | limitTo：数量＆＃34;＆gt;

Angular - 根据引导下拉选择过滤数据

2 个答案: