anglejsのドロップダウンで少数のjson値を選択する方法

Question

jsonファイルからデータを取得していますが、ドロップダウンで値を使用していますが、すべての値を使用したくないので、ドロップダウンで3つの値しか選択しません。

Answer 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> 

[UPDATE]

私は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"> 

Answer 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>

Answer 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"> 

あなたは、私がドロップダウンUSDで、この三つの値を選択するにはどうすればよい