角度js過濾器的搜索功能

我該如何使用AngularJS篩選器進行搜索功能使用此json結構？角度js過濾器的搜索功能

$scope.jsonObj = { 
    idNo1: { 
     name: "Diljish", 
     age: 24 
    }, 
    idNo2: { 
     name: "Shemeem", 
     age: 28 
    } 
}

來源

2016-11-25 Diljish

你怎麼想這個過濾器進行過濾？ – vistajess

取決於名稱 – Diljish

如果你想在對其進行過濾，NG-重複，你可以使用過濾器使用管道「|」：

<div ng-repeat="person in people | filter: customFilter"> 
 
</div>

然後，在你定義控制器customFilter：

   $scope.customfilter = function (person) { 
 
        return (person.name == $scope.nameToBeFiltered)}

其中「nameToBeFiltered」是您要過濾的名稱（您可以將該範圍變量模型化爲視圖中的輸入）。

現在，如果你想過濾別的地方，也許你正在尋找一個「Javascript：在Json中查找價值」而不是AngularJS。

來源

2016-11-25 12:24:50 TRDrake

查閱這些：

類似的問題：ng-repeat :filter by single field

文檔：需要https://docs.angularjs.org/api/ng/filter/filter

來源

2016-11-25 12:29:49

沒有JavaScript代碼。

你應該創建input數據進行過濾：

Filter: <input type="text" ng-model="yourFilter.name"/>

然後，在ng-repeat：

<table> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
    </tr> 
    <tr ng-repeat="person in persons | filter:yourFilter | orderBy:'name'"> 
    <td>{{ person.name | uppercase}}</td> 
    <td>{{ person.age | lowercase}}</td> 
    </tr> 
</table>

哪裏persons是你json對象。

(function() 
{   
    var yourController=function($scope) { 
      $scope.persons= []; 

      function init() { 
       $scope.persons={ 
         idNo1: { 
          name: "Diljish", 
          age: 24 
         }, 
         idNo2: { 
          name: "Shemeem", 
          age: 28 
        }} 
      }   
      init(); 
    };  


    yourController.$inject=['$scope']; 

    angular.module('yourApp').controller('yourController',   
               yourController); 

}());

更新：

它仍然是相同的，如果你使用其他json對象：

<body ng-init="people=[{ name:'Shemmem' }, { name:'Diljish' }]"> 
    Filter: <input type="text" ng-model="yourFilter.name"/> 
    <table> 
     <tr> 
      <td>Name</td> 
      <td>City</td> 
     </tr> 
     <tr ng-repeat="person in people | filter:yourFilter"> 
      <td>{{ person.name }}</td> 
      <td>{{ person.city }}</td> 
     </tr> 
    </table> 
</body>

來源

2016-11-25 12:44:04 StepUp

{{person.name}}

使用json $ scope。人= [ { 名稱： 'Shemmem' }，{ 名： 'Diljish' } ]但是，在我的問題JSON是不同 – Diljish

@Diljish請看到我的更新部分答案。 – StepUp

@Diljish隨時問任何問題。如果您覺得我的回覆對您有幫助，那麼您可以將我的回覆標記爲答案，以簡化未來搜索其他人的過程。請閱讀http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – StepUp

請找工作的代碼。

已經爲「名」

(function(angular) { 
 
    'use strict'; 
 
angular.module('app', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    $scope.filtertext=""; 
 
    $scope.jsonObj = { 
 
    idNo1: { 
 
     name: "Diljish", 
 
     age: 24 
 
    }, 
 
    idNo2: { 
 
     name: "Shemeem", 
 
     age: 28 
 
    } 
 
} 
 
    
 
    $scope.filterByName = function(items,filtertext) { 
 
    var result = {}; 
 
    angular.forEach(items, function(value, key) { 
 
     
 
     if (value.name.toLowerCase().indexOf(filtertext) > -1) { 
 
      result[key] = value; 
 
     } 
 
    }); 
 
    return result; 
 
    } 
 
    
 
    
 
    
 
}]); 
 
})(window.angular);

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-select-with-default-values-production</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script> 
 
    
 
</head> 
 
<body ng-app="app"> 
 
    <div ng-controller="ExampleController"> 
 
    <input type="text" ng-model="filtertext"/> 
 
    <hr> 
 
<div ng-repeat="(k,v) in filterByName(jsonObj,filtertext)"> 
 
    {{k}} {{v.name}} 
 
</div> 
 
    
 
</div> 
 
</body> 
 
</html>

來源

2016-11-25 12:58:42

角度js過濾器的搜索功能

回答

相關問題