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

テキストボックスに数値（インデックス）を入力すると、対応する項目が選択されます。