基于文本框的值显示下拉值

我有一个文本框和一个下拉框。文本框的值，我显示我从响应中获得的任何内容。基于文本框的值显示下拉值

例如，

下拉值，

$ 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

为什么ü要使用下拉如果您只需要为一个输入显示一个值（来自文本框）？ – Shubhranshu

现在只有一个价值，但如果未来会有两个或更多的价值。我需要在下拉列表中选择一个值，然后提交。所以我需要下拉。 –

然后，您应该使用正确的数据结构。它应该是对象的对象。在每个对象关键字处，可以从文本框中输入字符，并且该值是您想要在下拉菜单中显示的值的数组。对于这种结构，你将很容易实现目标 – 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函数内部。它不工作。 –

基于文本框的值显示下拉值

回答

相关问题