首页 \ 问答 \ angularjs使用下拉和单选按钮绑定输入文本字段(angularjs bind input text field with drop down and radio buttons)

angularjs使用下拉和单选按钮绑定输入文本字段(angularjs bind input text field with drop down and radio buttons)

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


i have this radio buttons and drop down menu that are synchronized dynamically. Im trying to include an input box (the selection field) where the user can type their choice as a number, for example if the user types 3 in the input box, the drop down menu and radio buttons should dynamically change as well to orange in this case and if the user types 2 to banana and so on. And also, I'm trying to list the selected fruit in the answer field dynamically. thanks for the help

 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>


原文:https://stackoverflow.com/questions/39871375
更新时间:2022-06-20 09:06

最满意答案

看到这个小提琴: 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];
    }

当您在文本框中输入一个数字(索引)时,它将选择相应的项目。


See this fiddle : https://jsfiddle.net/U3pVM/27636/

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

Script:

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

When you enter a number(index) in textbox it will selects the corresponding item.

相关问答

更多

相关文章

更多

最新问答

更多
  • Apache HttpClient(4.1和更新版本):如何进行基本身份验证?(Apache HttpClient (4.1 and newer): how to do basic authentication?)
  • 复选框不适用于模态(Checkbox does not work in modal)
  • 当使用大标题无法正常工作时,iOS 11会滚动到顶部(iOS 11 scroll to top when using large titles doesn't work properly)
  • 为什么我的Arduino不能超过10?(Why can't my Arduino compare above 10?)
  • 从Lib中删除PDB文件/功能(Remove the PDB file/functionality from Lib)
  • rails-2.3.5和rack-1.0.1的来源在哪里?(Where are the sources for rails-2.3.5 and rack-1.0.1?)
  • 如何使用List <>成员不可变的类?(How to make a class with List<> member immutable?)
  • Microsoft Edge popup扩展如何获取后台页面?(Microsoft Edge popup extension how to get backgroundpage?)
  • python删除中文unicode字符串之间的空格,但不删除英文单词之间的空格(python to remove space between Chinese unicode strings but not between English words)
  • SBT:如何Dockerize一个胖罐子?(SBT: How to Dockerize a fat jar?)
  • 如何从服务器请求中保存图像的分区以便以后合并(How to save segements of image in memory from server request for merging later)
  • python这段程序中a=self.[:]是什么意思 self一般用法是啥
  • ActiveRecord :: StatementInvalid:PGError:错误:关系“指令”不存在(ActiveRecord::StatementInvalid: PGError: ERROR: relation “instructions” does not exist)
  • 虚拟机安装kail linux最低配置是多少?
  • fread()中的空字符和c中的strncpy()(Null character in fread() and strncpy() in c)
  • 从ShutdownHook中查找程序退出的原因(Find, from a ShutdownHook, why a program exits)
  • 每天在固定时间运行任务(Run a task at fixed time everyday)
  • 电脑开不了机了,开机后进了桌面,显示WINDOWS BOOT MANAGER
  • 获取字符串第n个出现的索引?(Get the index of the nth occurrence of a string?)
  • python selenium 怎么打开 Chrome 并且能设置代理,请问可以指导小弟一下吗。
  • 错误:imagecopymerge()期望参数2是资源(Error: imagecopymerge() expects parameter 2 to be resource)
  • 在我的代码中,“无法找到可安装的ISAM”错误的原因是什么?(What could be the cause of 'Could not find installable ISAM' error in my code?)
  • Access 2013 - 没有自动编号的顺序编号(Access 2013 - sequential numbering without autonumber)
  • 将带有函数的Javascript对象转换为字符串(Converting a Javascript Object with Functions into a String)
  • Java中实现封装与信息隐藏与抽象与隐藏数据的比较(Practical example Encapsulation vs Information Hiding vs Abstraction vs Data Hiding in Java)
  • 不要包必须匹配java文件所在的子目录吗?(Don't packages have to match the subdirectories the java file is in?)
  • PyCharm Python控制台中的文件路径错误(File path wrong in PyCharm Python Console)
  • 在数据框列上应用curve_fit(Apply curve_fit on dataframe columns)
  • Java中的DateTime.FromOADate()相当于什么(Java中的Datetime是Datetime的两倍)(What is the equivalent of DateTime.FromOADate() in Java (double to Datetime in Java))
  • 给定DCEL,其中双胞胎等于下一个边缘,细分可以有多少面?(Given a DCEL where the twin is equal to the next of an edge, how many faces can the subdivision have?)