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]; 
    } 

Когда вы вводите номер (индекс) в текстовом поле, он выбирает соответствующий элемент.