Dropdown-Liste Auswahl eines Filters

Question

Ich versuche, alle Eigenschaften eines JSON-Objekts zu erhalten, um eine Dropdown-Liste zu erstellen.

Ich werde mich erklären, zum Beispiel:

Ich habe 2 json Objekte bekommt:

{"name":"Paul","age":"18","sport":"Basket","color":"Green"} 
{"name":"Jhon","age":"20","sport":"Basket","fruit":"banana", "number":"5"} 

ich eine Dropdown-Liste in {name,age,sport,color,fruit,number} habe. Wenn ich Name auswähle, habe ich eine zweite Dropdown-Liste innerhalb {Paul,Jhon}.

ich AngularJS bin mit, Node.js

Ich weiß, dass nach jeder Eigenschaft bekommt ich unicity Filter anwenden muß, um nur die differents Eigenschaften haben, aber nicht das Auftreten

Answer 1

Unter der Annahme, ES6 gut ist und wir können Set verwenden, um eindeutige Werte zurückgeben (wenn nein - Sie some other techniques to get an array with unique elements verwenden können) können Sie ngChange directive verwenden zur Ermittlung von Änderungen der ersten Auswahl und bevölkerten Optionen für die zweite Auswahl. So ist die Steuerung und Markup wird wie folgt aussehen:

angular.module('myApp', []) 
 
.controller('MyCtrl', function MyCtrl($scope) { 
 
    var ctrl = this; 
 

 
    var data = [ 
 
    {"name":"Paul","age":"18","sport":"Basket","color":"Green"}, \t 
 
    {"name":"Jhon","age":"20","sport":"Basket","fruit":"banana", "number":"5"}, 
 
    {"name":"Mark","age":"22","sport":"Football","color":"Red", "number":"5"} \t 
 
    ]; 
 

 
    ctrl.objKeys = getUniqueKeys(data); 
 
    ctrl.objVals = []; 
 
    ctrl.keyChanged = keyChanged; 
 

 
    function keyChanged(key) { 
 
    ctrl.objVals = getUnique(data.map(function(obj) { return obj[key] }).filter(function(obj) { return !!obj; })); //get the values and filter only the ones are defined 
 
    } 
 

 
    function getUnique(arr) { 
 
    return [...new Set(arr)]; //get array with unique values 
 
    } 
 

 
    function getUniqueKeys(arr) { 
 
    return getUnique([].concat.apply([], arr.map(function(obj) { return Object.keys(obj); }))); //get the property names 
 
    } 
 

 
    return ctrl; 
 
});

<script src="//code.angularjs.org/1.6.2/angular.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl as $ctrl"> 
 

 
    <select ng-model="objKey" ng-change="$ctrl.keyChanged(objKey)" 
 
    ng-options="k for k in $ctrl.objKeys track by k"></select> 
 

 
    <select ng-if="$ctrl.objVals.length" ng-model="objVal" 
 
    ng-options="k for k in $ctrl.objVals track by k"></select> 
 

 
    </div> 
 
</div>

Answer 2

nicht perfekt sein, aber es funktioniert

HTML:

<div ng-controller="MyCtrl"> 
     <select ng-model="selectedItem" ng-change="itemChanged()" ng-options="item for item in list1"> 
     </select> 
     <select ng-model="second" ng-options="lst for lst in list2 "></select> 

</div> 

Controller:

Demo

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

myApp.controller('MyCtrl', function MyCtrl($scope) { 
$scope.list1 = ["name","age","sport","color","fruit","number"]; 
$scope.data = [{"name":"Paul","age":"18","sport":"Basket","color":"Green"},{"name":"Jhon","age":"20","sport":"Basket","fruit":"banana", "number":"5"}]; 
    $scope.itemChanged = function() { 
    var prop = $scope.selectedItem;  
    $scope.list2 = []; 
    $scope.data.forEach(x => { 
    if(x[prop] && $scope.list2.indexOf(x[prop])) { 
     $scope.list2.push(x[prop]); 
    }  
    }); 
    }; 
}); 

Jsfiddle: http://jsfiddle.net/sathvike/vzzmrnvL/