angularjsにカスタマイズされた多値フィルターを定義する方法は？だから、

-1

、私はあなたが下の画像で見ることができるよう、複数の値（特にbuildingUseとclient）で検索するカスタムフィルタを作成します。

これらのプロパティに基づいて検索バーに入力されたtextと一致する値を取得したいとします。だから私はこれをどのように達成できますか？

実は私のコードは次のとおりです。

HTML：

<form role="form"> 
<div class="container"> 
    <md-content layout-padding=""> 
    <div layout="row" layout-wrap> 
     <md-input-container class="md-block" flex-gt-sm=""> 
     <label>Search Buildings</label> 
     <input name="search" ng-model="search.$"> 
     </md-input-container> 
    </div> 
    </md-content> 

    <table style="width: 100%;" > 
    <thead>   
     <tr> 
     <th ng-click="order('buildingName')">Building Name</th> 
     <th ng-click="order('client')">Client</th> 
     <th ng-click="order('buildingUse')">Building Use</th> 
     <th ng-click="order('addressline1')">Address</th> 
     <th ng-click="order('city')">City</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr data-ng-repeat="build in allbuildings | orderBy:predicate:reverse | filter:paginate| filter:search" > 
     <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.buildingName}} 
     </td> 
     <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.client}} 
     </td> 
     <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.buildingUse}} 
     </td>       
     <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.addressline1}} 
     </td> 
     <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.city}} 
     </td> 
    </tr> 
    </tbody> 
    </table> 

</div> 
</form>

JS：

var App = angular.module('myApp', []); 
App.controller('buildingdisplayController', ['$scope', '$rootScope', '$http', '$location', 
    function($scope, $rootScope, $http, $location, $localStorage) { 

    $http.get('/api/buildingslist') 
     .success(function(data) { 
     $scope.allbuildings = data; 
     }) 
     .error(function(data) { 
     console.log('error'); 
     }) 

    $scope.order = function(predicate) { 
     $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
     $scope.predicate = predicate; 
    }; 
    } 
]);

出典

2016-07-06 Vignesh R

Sincerelly私はよくあなたの質問を理解しているかどうかを知るが、私はありませんこのスニペットを作成しました：

var app = angular.module('app', []); 
 

 
app.controller('mainCtrl', function ($scope) { 
 
    $scope.builds = []; 
 
    
 
    function generate_builds() { 
 
    for (var i = 1; i <= 10; i++) { 
 
     $scope.builds.push( 
 
     { 
 
      "buildingName":"Build " + Math.floor(Math.random() * 999), 
 
      "client":"Client " + Math.floor(Math.random() * 999), 
 
      "buildingUse":"Use 150", // It's default 
 
      "address":"Address "+ Math.floor(Math.random() * 999), 
 
      "city":"City " + Math.floor(Math.random() * 999) 
 
     } 
 
    ); 
 
    } 
 
    } 
 
    
 
    generate_builds(); 
 
}); 
 

 
app.filter('customFilter', function() { 
 
    return function(items, search) { 
 
    if (!search) { 
 
     return items; 
 
    }  
 

 
    var searchArray = search.replace(/[^a-zA-Z0-9\u0080-\u00FF ,]+/g, " ").trim().split(', '); 
 
    // [0] = buildingUse 
 
    // [1] = client 
 
    if (searchArray.length > 2) { 
 
     return items; 
 
    } 
 
    return items.filter(function(element) { 
 
     return searchArray[1] ? element.buildingUse.indexOf(searchArray[0]) != -1 && element.client.indexOf(searchArray[1]) != -1 : element.buildingUse.indexOf(searchArray[0]) != -1 || element.client.indexOf(searchArray[1]) != -1; 
 
    }); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <hr> 
 
    <div class="col-md-8"> 
 
    <input class="form-control" type="text" ng-model="search" placeholder="Search by client or by building use"> 
 
    </div> 
 
    <p> 
 
    <table class="table table-hover"> 
 
     <thead> 
 
     <tr> 
 
      <th>Building Name</th> 
 
      <th>Client</th> 
 
      <th>Building Use</th> 
 
      <th>Address</th> 
 
      <th>City</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="c in builds | customFilter: search"> 
 
      <td ng-bind="c.buildingName"></td> 
 
      <td ng-bind="c.client"></td> 
 
      <td ng-bind="c.buildingUse"></td> 
 
      <td ng-bind="c.address"></td> 
 
      <td ng-bind="c.city"></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

0私はあなたがあなたのイメージに掲載のように定義されたカスタムフィルタを作った：

最初のパラメータはbuildingUseとclient検索する秒を検索する必要があります。

私はそれが助けてくれることを願っています！

出典

2016-07-06 21:31:26 developer033

あなたの答えをありがとう。 –

angularjsにカスタマイズされた多値フィルターを定義する方法は？だから、

答えて

関連する問題