使用角度单击事件下拉过滤器

我只是试图使用下拉菜单中的输入过滤或搜索相关数据。要求是在下拉列表中选择一个选项，然后单击它应该过滤的按钮或使用角度将相应的数据填充到表格中。我试过我可以直接做，但不是点击事件。请帮我找出解决方案，因为我是一种新角度。这里是我的代码：使用角度单击事件下拉过滤器

我的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

来源

2017-08-08 annie

您可以将逻辑移动到一个功能和呼叫按钮ng键上的功能，

$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>

来源

2017-08-08 02:11:33 Sajeetharan

https://plnkr.co/edit/yfW8nUufnK4euZNVUo6S?p=preview我修改plunker一点我不想seperatley根据它进行排序，你可以建议表ipuput给排序选项或filteroptions这件事@sajeetharan – annie

是什么问题？ – Sajeetharan

我更新了我的plunker多一点..先谢谢了 – annie

使用角度单击事件下拉过滤器

回答

相关问题