angularjs使用下拉和单选按钮绑定输入文本字段(angularjs bind input text field with drop down and radio buttons)

 我有这个单选按钮和动态同步的下拉菜单。 我试图包括一个输入框（选择域），用户可以在其中输入他们的选择作为一个数字，例如，如果用户在输入框中键入3，下拉菜单和单选按钮也应该动态改变为橙色这种情况下，如果用户键入2到香蕉等。 而且，我正在尝试动态列出答案字段中的选定水果。 谢谢您的帮助 
 
 
 
 
 
  
 var app = angular.module('App', []);
app.controller('aCtrl', function($scope) {
    $scope.fruits = [
        {name : "apple"},
        {name : "banana"},
        {name : "orange"},
        {name : "melon"}
    ];
});
 
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="App" ng-controller="aCtrl">

<p>choose a fruit</p>

<select ng-model="selectFruit" ng-options="x.name for x in fruits">
</select>
<input name='a' type="radio" ng-model="selectFruit" ng-value="fruits[0]"> apple
<input name='a' type="radio" ng-model="selectFruit"  ng-value="fruits[1]" > banana
<input name='a' type="radio" ng-model="selectFruit"  ng-value="fruits[2]"> orange
<input name='a' type="radio" ng-model="selectFruit"  ng-value="fruits[3]"> melon

 <p>Selection <input type="text" ng-model="selectFruit" /></p>

 <p>Answer</p>
<div ng-switch="selectFruit">
<div ng-switch-when="apple">
<h1>apple</h1>
  </div>

</div>
 
 
 
 

i have this radio buttons and drop down menu that are synchronized dynamically. Im trying to include an input box (the selection field) where the user can type their choice as a number, for example if the user types 3 in the input box, the drop down menu and radio buttons should dynamically change as well to orange in this case and if the user types 2 to banana and so on. And also, I'm trying to list the selected fruit in the answer field dynamically. thanks for the help
 
 
 
 
 
  
 var app = angular.module('App', []);
app.controller('aCtrl', function($scope) {
    $scope.fruits = [
        {name : "apple"},
        {name : "banana"},
        {name : "orange"},
        {name : "melon"}
    ];
});
 
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="App" ng-controller="aCtrl">

<p>choose a fruit</p>

<select ng-model="selectFruit" ng-options="x.name for x in fruits">
</select>
<input name='a' type="radio" ng-model="selectFruit" ng-value="fruits[0]"> apple
<input name='a' type="radio" ng-model="selectFruit"  ng-value="fruits[1]" > banana
<input name='a' type="radio" ng-model="selectFruit"  ng-value="fruits[2]"> orange
<input name='a' type="radio" ng-model="selectFruit"  ng-value="fruits[3]"> melon

 <p>Selection <input type="text" ng-model="selectFruit" /></p>

 <p>Answer</p>
<div ng-switch="selectFruit">
<div ng-switch-when="apple">
<h1>apple</h1>
  </div>

</div>
 
 
 
 

原文：https://stackoverflow.com/questions/39871375