如何通過AngularJS按鈕點擊按鈕值來過濾數據？

Question

我正在嘗試使用修復按鈕值搜索數據，比如當我點擊veg按鈕時，我只想查看類別數據。現在我的代碼就像。 實際上，我是Angular js代碼的新學習者。

First my button code:<butto id="veg" ng-click="myFilter = {type: 1}" title="veg"> 

My data display code:<div class="side-body padding-top fade in tab-pane" id="<?php echo $tt3->id; ?>"> 
       <div class="row"> 
       <div ng-if='r.pro_category == <?php echo $tt3->id; ?>' ng-repeat = "r in groups | filter : searchGroups | filter:myFilter"> 
        <div> 
         <div class="thumbnail"> 
          <div><img src="../@{{r.image }}" alt="" /></div> 
          <div class="caption" style="padding-top:0px;"> 
          <div>@{{r.pro_name }}</div> 

           <div>@{{r.price}}</div> 

        </div> 
        </div> 
        </div> 

</div> 
My script code: <script> 
var GroupsApp = angular.module('GroupsApp',[]); 
GroupsApp.controller('GroupsController', function ($scope, GroupsService) 
{ 

    getGroups(); 
    function getGroups() { 
     GroupsService.getGroups() 
      .success(function (grps) { 
       $scope.groups = grps; 

       return (val.type != 2); 

       console.log($scope.groups); 
      }) 
      .error(function (error) { 
       $scope.status = 'Unable to load Product data: ' + error.message; 
       console.log($scope.status); 
      }); 
    } 
}); 

var url = window.location.pathname; 
var productid = url.substring(url.lastIndexOf('/') + 1); 
GroupsApp.factory('GroupsService', ['$http', function ($http) { 


    var GroupsService = {}; 
    GroupsService.getGroups = function() { 
     return $http.get('../showproduct/'+productid); 
    }; 
    return GroupsService; 
}]); 

var url = window.location.pathname; 
var productid = url.substring(url.lastIndexOf('/') + 1); 
GroupsApp.factory('GroupsService', ['$http', function ($http) { 


    var GroupsService = {}; 
    GroupsService.getGroups = function() { 
     return $http.get('../showproduct/'+productid); 
    }; 
    return GroupsService; 
}]); 
</script> 

請幫助如何使用按鈕點擊搜索數據。

Answer 1

這裏是example

<div ng-app ng-controller="Test"> 
    <button ng-click="myFilter = {type: 1}">veg</button> | 
    <button ng-click="myFilter = {type: 2}">non veg</button> | 
    <button ng-click="myFilter = null">None</button> 
    <ul > 
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li> 
    </ul> 
</div> 


function Test($scope) { 
    $scope.persons = [{type: 1, name: 'cheese'}, {type:2, name: 'chicken'}, {type:1, name: 'carrot'}, {type:2, name: 'beaf'}]; 
    $scope.myFunction = function(val) { 

    return (val.type != 2); 
    }; 
}