如何在AngularJS按钮单击中按按钮值过滤数据?

Posted

技术标签:

【中文标题】如何在AngularJS按钮单击中按按钮值过滤数据?【英文标题】:How to filter data by button value in AngularJS button click? 【发布时间】:2017-08-17 02:10:17 【问题描述】:

我正在尝试使用修复按钮值搜索数据,例如当我单击 veg 按钮时,我只想搜索 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 "  /></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>

请帮助如何通过单击按钮搜索数据。

【问题讨论】:

请只包含相关的 html,删除不必要的类以提高可读性 @devqon 我尽量对我的代码进行排序。 【参考方案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);
    ;

【讨论】:

我输入了您的代码并更改了我的问题,但仍然无法正常工作

以上是关于如何在AngularJS按钮单击中按按钮值过滤数据?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Compose 函数的按钮单击中启动 Intent

Blazor - 如何使用 ICommand 在按钮单击中执行表单提交

在单个按钮单击中隐藏多个 UIButton

使用AngularJS在下拉列表中按选定值启用/禁用按钮

在自定义按钮单击中播放 iframe 内的 youtube 视频

允许用户使用单选按钮 django 按升序排序