如何在angularjs的下拉列表中选择几个json值答案

【问题标题】：how to select few json values in drop down in angularjs如何在angularjs的下拉列表中选择几个json值
【发布时间】：2017-03-22 08:38:31
【问题描述】：

我从 json 文件和下拉列表中使用的值获取数据，但我不想使用所有值，我只想在下拉列表中选择三个值。

【问题讨论】：

你要使用哪个值

标签： javascript angularjs json angularjs-directive angularjs-scope

【解决方案1】：

您可以在将列表提供给下拉列表时对其进行过滤。

<select ng-model="toType" class="form-control" required ng-change="ConvertCurrency()" 
ng-options="k for (k, v) in (rates | 'yourfilter') track by v"></select>

[更新]

我尝试访问 API，发现 res.data.rates 是一个对象而不是数组。

所以如果你只需要显示这 3 个值，简单的方法是在控制器中创建一个新数组：

var ratesToDisplay = []; 
ratesToDisplay.push({rate:'USD', value: res.data.rates.USD});
ratesToDisplay.push({rate:'EUR', value: res.data.rates.EUR});
ratesToDisplay.push({rate:'CAD', value: res.data.rates.CAD});

并将这个新过滤的数组提供给您的下拉列表。

  <select ng-model="selectedRate" ng-options="rate.value as rate.rate for rate in ratesToDisplay">
    <option value="" disabled>Please Select</option>
  </select>

我希望这会有所帮助。

问题的第二部分

您可以实现ng-change() 方法并从该方法调用API。例如：

    function onDDChange(){
     $http.get('http://api.fixer.io/latest?' + $scope.fromType.label)
.then(function(res) { \\logic for success call back 
    \\ call convert currency method from here.
    });
    }

HTML：

    <select ng-model="fromType" class="form-control" required 
ng-change="onDDChange()" ng-options="f as f.label for f in rates">

【讨论】：

如何在下拉菜单中选择这三个值 USD、EUR 和 CAD。
创建一个过滤器并应用硬编码检查来过滤掉列表。像这样：app.filter('rateFilter', function() { return function(input) { if (input == 'USD' || input == 'EUR' || input == 'CAD') return input; }; });
@VishalJoshi 检查我的更新答案，了解您问题的第二部分。我希望这会有所帮助。另外，如果您觉得我的解决方案对您有帮助，请将其标记为答案并对答案 / cmets 投赞成票。

【解决方案2】：

这可能不是最好的方法。但这就是我用过滤器所能做到的。

angular.module("app",[])
.controller('ConvertCtrl', ['$scope', '$http', function($scope, $http) {

var filterArr = ['USD', 'CAD' , 'EUR' ];

$scope.filterObj = {};

$scope.customSearch = function(){

  if(!$scope.rates) return false; 
   for(i in filterArr){
   
      if($scope.rates[filterArr[i]]){
        $scope.filterObj[filterArr[i]] = $scope.rates[filterArr[i]]
      }
   }
   return $scope.filterObj
}

        $http.get('http://api.fixer.io/latest').then(function(res) {

                $scope.rates = res.data.rates;
                $scope.toType = $scope.rates.CAD;
                $scope.fromType = $scope.rates.USD;
                $scope.fromValue = 1;
                $scope.ConvertCurrency();
            });

            $scope.ConvertCurrency = function() {
            $scope.toValue = $scope.fromValue * ($scope.toType * (1 / $scope.fromType));
            $scope.toValue = $scope.toValue;
        };
    }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app"  >
 <div  ng-controller="ConvertCtrl">                               <!-- Controller defined-->
                <form action="" method="POST" role="form">
                            <input type="number" class="form-control" placeholder="0.00" ng-model="fromValue" ng-change="ConvertCurrency()">
                            <select ng-model="fromType" class="form-control" required ng-change="ConvertCurrency()" ng-options="k for (k, v) in filterObj | filter:customSearch()">
                            </select>
                            <input type="text" class="form-control" placeholder="0.00" ng-model="toValue" ng-change="ConvertCurrency()">
                            <select ng-model="toType" class="form-control" required ng-change="ConvertCurrency()" ng-options="k for (k, v) in rates track by v">
                            </select>

                </form>  

</div> 
</div>

【讨论】：

【解决方案3】：

我已经编写了这段代码，它对我有用

angular.module('CurrencyConv', [' ']).controller('ConvertCtrl', ['$scope', '$http', function($scope, $http) {
$scope.rates = [];

$scope.toType = {};
$scope.fromType = {};

$http.get('http://api.fixer.io/latest?base').then(function(res) {


    $scope.fromValue = 1;
    $scope.ConvertCurrency();

    var i = 0;

    angular.forEach(res.data.rates, function(value, key) {

        if (key == "USD" || key == "EUR" || key == "CAD") {
            $scope.rates.push({ value: value, label: key });
            // $scope.toType = $scope.rates.CAD;
            // $scope.fromType = $scope.rates.USD;
        }
        i++;

    });

});
                        <select ng-model="fromType" class="form-control" required ng-change="ConvertCurrency()" ng-options="f as f.label for f in rates">

【讨论】：