代码之家 › 专栏 › 技术社区 › annie

使用角度和下拉点击事件过滤

angularjs javascript

annie · 技术社区 · 8 年前

我只是尝试使用下拉列表中的输入筛选或搜索相关数据。要求是在下拉列表中选择一个选项,然后单击按钮,它应该使用angular筛选或填充相应的数据到表中。我试过我可以直接做,但不能用点击事件。请帮我找到解决方法,因为我对angular有点陌生。这是我的代码:

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

 $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

1 回复 | 直到 8 年前

Sajeetharan 8 年前

您可以将逻辑移动到一个函数,并在单击按钮时调用该函数,

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

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

app.controller('MainCtrl', function($scope) {
  
  //Contains the filter options
  $scope.filterOptions = {
    stores: [
      {id : 2, name : 'Show All', rating: 6 },
			{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>