角度を使用してクリックイベントのドロップダウンを使用するフィルタ

Question

ドロップダウンからの入力を使用してリレートデータをフィルタリングまたは検索しようとしています。ドロップダウンでオプションを選択し、ボタンをクリックすると、角を使用してそれぞれのデータをテーブルに取り込む必要があります。私はそれを直接行うことができましたが、クリックイベントではできませんでした。私が角度の新しさのようにこれのための解決策を見つけるために私を助けてください。ここに私のコードは次のとおりです。

マイHTML：

Filter: 
     <select ng-model="filterItem.store" ng-options="item.name for item in filterOptions.stores"> 
     </select> 

     <button >search</button> 

<table> 
     <tr> 
     <th>Name</th> 
     <th>Price</th> 
     <th>Rating</th> 
     </tr> 
     <tr ng-repeat="item in data | filter:customFilter"> 
     <td ng-click=""> 
     {{item.name}}</td> 
     <td>{{item.price}}</td> 
     <td>{{item.rating}}</td> 
     </tr> 

    </table> 

JSファイル：

$scope.customFilter = function (data) { 
    if (data.rating === $scope.filterItem.store.rating) { 
     return true; 
    } else if ($scope.filterItem.store.rating === 6) { 
     return true; 
    } else { 
     return false; 
    } 
    }; 

    //The data that is shown 
    $scope.data = [ 
    { 
     name: "product1", 
     price: 198, 
     rating: 1 
    }, 
    { 
     name: "product2", 
     price: 200, 
     rating: 5 
    }, 
    { 
     name: "product3", 
     price: 200, 
     rating: 2 
    }, 
    { 
     name: "product4", 
     price: 10, 
     rating: 3 
    }, 
    { 
     name: "product5", 
     price: 200, 
     rating: 3 
    }, 
    { 
     name: "product6", 
     price: 400, 
     rating: 5 
    } 

Pluker：

http://plnkr.co/edit/RhJic3KYE0Lc42FJ2lOx?p=preview

Answer 1

あなたは機能とコールにロジックを移動することができますボタンのクリック機能、

$scope.filter = function(){ 
     $scope.filtereddata = []; 
     angular.forEach($scope.data,function(key,value){ 
     if(key.rating === $scope.filterItem.store.rating) 
     $scope.filtereddata.push(key); 
     }) 
    } 

HTML

<button ng-click="filter()">search</button> 

とngのリピートは、フィルタリングされたデータに基づいている必要があり、

<li data-ng-repeat="item in filtereddata | orderBy:'price':reverse "> 
     Name: {{item.name}} Price: {{item.price}} Rating: {{item.rating}} 
</li> 

DEMO

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

 
app.controller('MainCtrl', function($scope) { 
 
    
 
    //Contains the filter options 
 
    $scope.filterOptions = { 
 
    stores: [ 
 
     {id : 2, name : 'Show All', rating: 6 }, 
 
\t \t \t {id : 3, name : 'Rating 5', rating: 5 }, 
 
     {id : 4, name : 'Rating 4', rating: 4 }, 
 
     {id : 5, name : 'Rating 3', rating: 3 }, 
 
     {id : 6, name : 'Rating 2', rating: 2 }, 
 
     {id : 7, name : 'Rating 1', rating: 1 } 
 
    ] 
 
    }; 
 
    
 
    //Contains the sorting options 
 
    $scope.sortOptions = { 
 
    stores: [ 
 
     {id : 1, name : 'Price Highest to Lowest' },  
 
     {id : 2, name : 'Price Lowest to Highest' }, 
 
     ] 
 
    }; 
 
    
 
    //Mapped to the model to filter 
 
    $scope.filterItem = { 
 
    store: $scope.filterOptions.stores[0] 
 
    } 
 
    
 
    //Mapped to the model to sort 
 
    $scope.sortItem = { 
 
    store: $scope.sortOptions.stores[0] 
 
    }; 
 
    
 
    //Watch the sorting model - when it changes, change the 
 
    //ordering of the sort (descending/ascending) 
 
    $scope.$watch('sortItem', function() { 
 
    console.log($scope.sortItem); 
 
    if ($scope.sortItem.store.id === 1) { 
 
     $scope.reverse = true; 
 
    } else { 
 
     $scope.reverse = false; 
 
    } 
 
    }, true); 
 
    
 
    
 
    
 
    $scope.filter = function(){ 
 
     $scope.filtereddata = []; 
 
     angular.forEach($scope.data,function(key,value){ 
 
     if(key.rating === $scope.filterItem.store.rating) 
 
     $scope.filtereddata.push(key); 
 
     }) 
 
    } 
 
    //The data that is shown 
 
    $scope.data = [ 
 
    { 
 
     name: "product1", 
 
     price: 198, 
 
     rating: 1 
 
    }, 
 
    { 
 
     name: "product2", 
 
     price: 200, 
 
     rating: 5 
 
    }, 
 
    { 
 
     name: "product3", 
 
     price: 200, 
 
     rating: 2 
 
    }, 
 
    { 
 
     name: "product4", 
 
     price: 10, 
 
     rating: 3 
 
    }, 
 
    { 
 
     name: "product5", 
 
     price: 200, 
 
     rating: 3 
 
    }, 
 
    { 
 
     name: "product6", 
 
     price: 400, 
 
     rating: 5 
 
    } 
 
    ]; 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="style.css" /> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 

 
    Filter: 
 
    <select ng-model="filterItem.store" ng-options="item.name for item in filterOptions.stores"> 
 
    </select> 
 

 
    <button ng-click="filter()">search</button> 
 

 
    Sort: 
 
    <select ng-model="sortItem.store" ng-options="item.name for item in sortOptions.stores"> 
 
    </select> 
 
    <p> 
 
    <strong>Selected Filter dropdown item: </strong> {{filterItem.store.name}} 
 
    </p> 
 

 
    <p> 
 
    <strong>Selected Sort dropdown item: </strong> {{sortItem.store.name}} 
 
    </p> 
 

 
    <ul> 
 
    <!-- We are getting the data first, filtering the data and then sorting the data based 
 
    on the select options --> 
 
    <li data-ng-repeat="item in filtereddata | orderBy:'price':reverse "> 
 
     Name: {{item.name}} Price: {{item.price}} Rating: {{item.rating}} 
 
    </li> 
 
    </ul> 
 
    <table> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Price</th> 
 
     <th>Rating</th> 
 
    </tr> 
 
    <tr ng-repeat="item in data | filter:customFilter"> 
 
     <td ng-click=""> 
 
     {{item.name}}</td> 
 
     <td>{{item.price}}</td> 
 
     <td>{{item.rating}}</td> 
 
    </tr> 
 

 
    </table> 
 
</body> 
 

 
</html>

私は私のplunkerは少し私はそれはあなたがお勧めすることができ、テーブルを並べ替えることがありipuputに応じseperatleyソートオプションまたはfilteroptionsを与えたくない修正https://plnkr.co/edit/yfW8nUufnK4euZNVUo6S?p=preview