Question

我只是尝试使用下拉列表中的输入过滤或搜索相关数据。要求是在下拉列表中选择一个选项，然后单击它应该过滤的按钮或使用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>

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

您可以将逻辑移动到某个功能，然后按下按钮ng-click，

调用该功能

 $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-repeat应基于过滤后的数据

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

<强>样本

＆＃13;

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
    }
  ];
});

＆＃13;

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

＆＃13;

使用角度过滤单击事件的下拉列表

1 个答案: