选择过滤器的下拉列表答案

【问题标题】：Dropdown list selecting a filter选择过滤器的下拉列表
【发布时间】：2017-11-07 13:59:14
【问题描述】：

我正在尝试获取 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

我知道在获得每个属性后，我必须应用唯一性过滤器，只有不同的属性而不是发生率

【问题讨论】：

标签： javascript angularjs json node.js

【解决方案1】：

可能并不完美，但它正在工作

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/

【讨论】：

【解决方案2】：

假设 ES6 很好，我们可以使用 Set 来返回唯一值（如果不是 - 您可以使用 some other techniques to get an array with unique elements），您可以使用 ngChange directive 来检测第一个选择的变化和第二个选择的填充选项。所以控制器和标记看起来像：

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>

【讨论】：