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

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