[英]Dropdown list selecting a filter
我試圖獲取json對象的每個屬性,以創建一個下拉列表。
我將解釋自己,例如:
我有2個json對象:
{"name":"Paul","age":"18","sport":"Basket","color":"Green"}
{"name":"Jhon","age":"20","sport":"Basket","fruit":"banana", "number":"5"}
我在{name,age,sport,color,fruit,number}
有一個下拉列表。 如果選擇名稱,那么{Paul,Jhon}
有第二個下拉列表。
我正在使用AngularJS,Node.js
我知道在獲得所有屬性后,我必須應用唯一性過濾器,才能僅具有differents屬性,而沒有出現
假設ES6很好,我們可以使用Set返回唯一值(如果否,則可以使用其他技術來獲取具有唯一元素的數組 ),可以使用ngChange
指令來檢測第一個選擇的更改以及第二個選擇的填充選項。 因此,控制器和標記將如下所示:
angular.module('myApp', []) .controller('MyCtrl', function MyCtrl($scope) { var ctrl = this; var data = [ {"name":"Paul","age":"18","sport":"Basket","color":"Green"}, {"name":"Jhon","age":"20","sport":"Basket","fruit":"banana", "number":"5"}, {"name":"Mark","age":"22","sport":"Football","color":"Red", "number":"5"} ]; 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>
可能不是完美的,但是正在工作
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>
控制器:
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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.