angularjs用下拉和单选按钮绑定输入文本字段

Question

我有这个单选按钮和动态同步的下拉菜单。我试图包含一个输入框（选择字段），用户可以在其中输入他们的选择作为数字，例如，如果用户在输入框中输入 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>

Answer 1

看到这个小提琴：https://jsfiddle.net/U3pVM/27636/

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

脚本：

$scope.change = function(a){
      $scope.selectFruit = $scope.fruits[a];
    }

当您在文本框中输入数字（索引）时，它将选择相应的项目。