角度 - ブートストラップのドロップダウン選択に基づくデータのフィルタリング

ブートストラップのドロップダウンからの選択に基づいてリストをフィルタリングしようとしていますが、動作させられないようです。角度 - ブートストラップのドロップダウン選択に基づくデータのフィルタリング

<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-モデルデータを使用することができます知っているが、私は、ブートストラップドロップダウンを使用したいここに私のコードです。

上記のコードはscope.filter変数を更新していますが、ログメッセージのリストはフィルタリングされません。

httpリクエストは、メッセージ、タイムスタンプ、および重大度フィールドを含むログデータオブジェクトを持つjson配列を取得しています。

出典

2017-03-14 Slims

は$scope.apply()を呼び出してみてください。

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

詳細についてはここを見て、別のアプローチ（実際のデータ・バインディング代わりにカスタムコールバックのを使用して）考えてみましょう。私は、顧客の重要度フィルタを作成しますhttps://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()

出典

2017-03-14 14:45:34

を

：

.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 = "データのログデータ| severityFilter：重大度| limitTo：数量>>

出典

2017-03-14 14:56:21

角度 - ブートストラップのドロップダウン選択に基づくデータのフィルタリング

答えて

関連する問題