[英]How to filter array with arraylist using ng-repeat
我正在尝试使用简单的数组列表筛选一个数组,但似乎无法弄清楚如何,我尝试使用自定义筛选器,但无法使其正常工作。 编辑:我添加了更多的代码。 文本框搜索工作正常,但是当我在ng-repeat上添加myFilterby时,它不再进行过滤。 我只是想过滤出一个数组列表。
<div class="input-group">
<input type="text" class="form-control" placeholder="Search .." ng-model="searchText">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<td ng-repeat="a in product| filter:searchText | filter:myFilterBy">
<img class="avatar" src="img/{{a.image}}" alt="">
<div class="middleT">
<p>{{a.brand}} {{a.model}} </p>
<p>${{a.price}} </p>
</div>
角度:
var HandleModule = angular.module("HandleModule",['rzModule','ui.bootstrap','angular.filter']);
HandleModule.controller('HandleCtrl',function($scope,$http){
// get data from the server in JSON format
$scope.chk0 = ['apple', 'orange', 'banana'];
$http.get('./loader.php').then(successCallback, errorCallback);
function successCallback(response){
//success code
$scope.product = response.data;
}
function errorCallback(error){
//error code
$scope.product="error";
}
$scope.myFilterBy = function(e) {
return $scope.chk0.indexOf(e) !== -1;
}
PHP:
<?php
$con = mysqli_connect("localhost","root","","product");
$query = "SELECT id, model, brand, price, description, image, FROM fruits ORDER BY id";
$result = mysqli_query($con, $query);
$fruits= array();
while($row = mysqli_fetch_assoc($result))
{
$fruits[] = $row;
}
echo json_encode($fruits);
?>
使用NG-repeat分别打印出数据。 我用ng-repeat在html上显示
<p ng-repeat="a in products ">
{{a}}
{"id":"1","model":"test1","brand":"orange","price":"4",
"description":"orange sweet and sour","image":"orange.jpg"}
{"id":"2","model":"test2","brand":"banana","price":"3",
"description":"yellow sweet","image":"banana.jpg"}
{"id":"3","model":"test3","brand":"apple","price":"5",
"description":" red sweet crunchy","image":"apple.jpg"}
根据我对问题和后续评论的理解,您只是在尝试通过用户输入的搜索文本和静态数组来过滤产品数组。
您的问题是您试图将一个对象与字符串数组进行比较。 要解决您的问题,您应该将对象属性(在这种情况下为brand)与字符串数组进行比较。
您可以在下面看到它的工作。 为简单起见,我删除了对于此问题不是必需的所有代码。
var HandleModule = angular.module("HandleModule", []); HandleModule.controller('HandleCtrl', function($scope) { $scope.chk0 = ['apple', 'orange', 'banana']; $scope.product = [{ "id": "1", "model": "test1", "brand": "orange", "price": "4", "description": "orange sweet and sour", "image": "orange.jpg" }, { "id": "2", "model": "test2", "brand": "banana", "price": "3", "description": "yellow sweet", "image": "banana.jpg" }, { "id": "3", "model": "test3", "brand": "apple", "price": "5", "description": "red sweet crunchy", "image": "apple.jpg" }, { "id": "4", "model": "test4", "brand": "pear", "price": "6", "description": "red sweet crunchy", "image": "pear.jpg" }]; $scope.myFilterBy = function(e) { return $scope.chk0.indexOf(e.brand) >= 0; }; });
<html ng-app="HandleModule"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-controller="HandleCtrl"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search .." ng-model="searchText" /> </div> <table> <tbody> <tr> <td ng-repeat="a in product| filter:searchText | filter:myFilterBy"> <div> <p>{{a.brand}} {{a.model}} </p> <p>${{a.price}} </p> </div> </td> </tr> </tbody> </table> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.