2016-05-31 9 views
1

Ich habe Objekt PersonenAngular JS - Filterobjektschlüssel von Schlüsselnamen

persons = { 
    name : 'Thomas M', 
    username : 'mthomas', 
    company : 'XYZ', 
    email : '[email protected]' 
    city : 'Philadelphia', 
    country : 'USA' 
}; 

gibt es eine das Objekt von Schlüsselnamen, dh zu filtern, wenn ich durch das Schlüsselwort filtern - Name, sollte es Name Benutzernamen angezeigt werden

AngularJS Filter funktioniert auf Wert aber auf Schlüsselwert.

+0

Plunker Link- https://plnkr.co/edit/7NEruSOtUjIWS5ceKe36?p=preview Referenz was ich gerade arbeite und versuche verschiedene Optionen zu finden, Lösung –

Antwort

1

Vielen Dank awolf für deine Antwort.

Ich habe einen einfachen Weg zum Filtern basierend auf Schlüssel gefunden.

finden Sie die Geige unten als Referenz und lassen Sie mich wissen Ihre Kommentare

 <body> 
     <div ng-app="myApp" ng-controller="myCtrl as mainCtrl"> 
     current filter: 
     <input ng-model="field" ng-change="mainCtrl.cur" /> 
     <div ng-repeat="x in keys | filter:field"> 
      <p>{{x}} : 
      <input readonly="" type="text" ng-model="person[x]" class="person" /> 
      </p> 
     </div> 
     </div> 
    </body> 

    angular.module('myApp', []) 
     .controller('myCtrl', function MainController($scope) { 
     $scope.person = { 
      name: 'Thomas M', 
      username: 'mthomas', 
      company: 'XYZ', 
      email: '[email protected]', 
      city: 'Philadelphia', 
      country: 'USA' 
     }; 

     $scope.keys = Object.keys($scope.person); 



     }); 

    /* Styles go here */ 

    .person { 
     border: none 
    } 

Dank Sai

+0

https://jsfiddle.net/Nagasai_Aytha/eauvh71L/1/ –

+0

Gute Lösung. Sie könnten auch einen benutzerdefinierten Filter erstellen, aber Ihr Weg ist auch OK. Ich mag Ihr ng-repeat-Markup nur für die Schlüsseliteration nicht. Es funktioniert, aber ich denke '(Schlüssel, Wert)' ng-repeat Syntax ist einfacher zu verwenden/zu lesen. Bitte schauen Sie sich [fiddle] (https://jsfiddle.net/xz7ykw4z/) an. – AWolf

+0

sieht gut aus .. danke AWolf :) .. Abstimmung kommt für dich :) –

2

Sie könnten eine For-Schleife erstellen, die über das Objekt iteriert und eine Prüfung durchführt, ob die Eigenschaft ausgewählt werden muss.

Wenn Sie es nicht codieren möchten, könnten Sie hierfür underscore.pick verwenden.

Bitte werfen Sie einen Blick auf die Demo unten oder in diesem fiddle.

angular.module('demoApp', []) 
 
    .controller('mainController', MainController); 
 

 
function MainController() { 
 
    var vm = this; 
 

 
    var person = { 
 
    name: 'Thomas M', 
 
    username: 'mthomas', 
 
    company: 'XYZ', 
 
    email: '[email protected]', 
 
    city: 'Philadelphia', 
 
    country: 'USA' 
 
    }; 
 

 
    vm.curFilter = 'name, username'; 
 

 
    vm.applyFilter = function() { 
 
    var filterData = vm.curFilter 
 
     .replace(/\s/g, '').split(','); 
 
    vm.filteredPerson = pick(person, filterData); 
 
    }; 
 

 
    vm.applyFilter(); // initial apply 
 

 
    function pick(obj) { 
 
    var keys = Object.keys(obj), 
 
     args = arguments[1] instanceof Array ? arguments[1] : [].slice.apply(arguments), 
 
     key = '', 
 
     picked = {}; 
 

 
    for (var i = 0; i < keys.length; i++) { 
 
     key = keys[i]; 
 
     //console.log(key, args, args.indexOf(key)); 
 
     if (args.indexOf(key) !== -1) { 
 
     picked[key] = obj[key]; 
 
     } 
 
    } 
 

 
    return picked; 
 
    } 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as mainCtrl"> 
 
    current filter: 
 
    <input ng-model="mainCtrl.curFilter" ng-change="mainCtrl.applyFilter()"> 
 
    <pre> 
 
{{mainCtrl.filteredPerson | json : 2}} 
 
</pre> 
 
</div>