テキストボックスの値に基づいてドロップダウン値を表示

私は1つのテキストボックスと1つのドロップダウンを持っています。テキストボックスの値は、私が応答から得ているものを表示しています。例えばテキストボックスの値に基づいてドロップダウン値を表示

、

ドロップダウン値は、

$ scope.newPlan = [ "A"、 "I"、 "B"、 "II"、 "C"、 "III"]です。

私のテキストボックスの値は "A"です。条件は、私のテキストボックスの値が "A"の場合、私はドロップダウンに "I"だけを表示し、残りは表示したくないということです。同じ

"A"、などの - > "I"

"B" - > "II"

"C" - > "III"

私が使用していangularjs。これをドロップダウンでどのように表示できますか？

It is ahowing all the values. 
 

 
$scope.newPlan = ["A", "I", "B", "II", "C", "III"]; 
 
$scope.textboxValue = "A"; 
 
if ($scope.existingPlan == "A") { 
 
    $scope.gpasPlan = $scope.newPlan[1]; 
 
} else if ($scope.existingPlan == "B") { 
 
    $scope.gpasPlan = $scope.newPlan[3]; 
 
} else if ($scope.existingPlan == "C") { 
 
    $scope.gpasPlan = $scope.newPlan[5]; 
 
}

<select required name="selectnewPlan" ng-model="gpasPlan" ng-options="item for item in newPlan"> 
 
    <option value="">--Choose New Plan--</option> 
 
</select>

は、どのように私はこれを行うことができます。..

出典

2017-09-06 sathish kumar

はなぜuがあなたの場合は、ドロップダウンを使用したくないこのヘルプ1つの入力に対して1つの値を表示するだけです（テキストボックスから）。 – Shubhranshu

今は1つの値だけですが、将来的に2つ以上の値が来る場合は、私はドロップダウンで一つの値を選択し、それを提出する必要があります。だから私はドロップダウンが必要です。 –

正しいデータ構造を使用する必要があります。それはオブジェクトのオブジェクトでなければなりません。どのオブジェクトキーでも、テキストボックスから文字を入力することができ、値はドロップダウンで表示する値の配列です。この構造では、あなたが目標を達成するのは非常に簡単です – Shubhranshu

ことがあります:)

<!DOCTYPE html> 
<html> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 

     <input type="text" ng-change="changeDropdownValue(existingPlan)" 
      ng-model="existingPlan"> <select ng-model="selectedName" 
      ng-options="x for x in newPlan"> 
     </select> 
    </div> 
    <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function ($scope) { 
      $scope.changeDropdownValue = function (data) { 
       $scope.newPlan = [ 
         "A", "I", "B", "II", "C", "III" 
       ]; 
       if ($scope.existingPlan == "A") { 
        $scope.selectedName = $scope.newPlan[ 1 ]; 
        $scope.newPlan = $scope.newPlan[ 1 ]; 
        console.log($scope.newPlan); 
       } else if ($scope.existingPlan == "B") { 
        $scope.selectedName = $scope.newPlan[ 3 ]; 
        $scope.newPlan = $scope.newPlan[ 3 ]; 
       } else if ($scope.existingPlan == "C") { 
        $scope.selectedName = $scope.newPlan[ 5 ]; 
        $scope.newPlan = $scope.newPlan[ 5 ]; 
       } 
      } 

     }); 
    </script> 
</body> 
</html>

出典

2017-09-06 12:26:07

テキストボックスでng-changeを使用すると動作しますか？ドロップダウンで正しく動作しますか？申し訳ありませんSurojit Jana、それは動作していません。ドロップダウンはすべての値を示しています。 –

私のコードをコピーする@satish kumar ..ハッピーコーディング:) –

いいえSurojit Jana、それはchangeDropdownValue関数の中にも入っていません。動いていない。 –

テキストボックスの値に基づいてドロップダウン値を表示

答えて

関連する問題