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＆GT;

<强>脚本：

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

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

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

1 个答案: