如何在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按钮单击中按按钮值过滤数据?的主要内容,如果未能解决你的问题,请参考以下文章
Blazor - 如何使用 ICommand 在按钮单击中执行表单提交