如何将单选按钮绑定到下拉菜单？
[英]How to bind radio a drop down menu with radio buttons?
问题描述
how can i synchronize the drop down menu with the radio buttons so when i check one button, the drop down menu changes dynamically with the same option? 
我如何使下拉菜单与单选按钮同步，以便当我选中一个按钮时，下拉菜单使用相同的选项会动态变化？
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.colors = [ {model : "Red"}, {model : "Green"}, {model : "Blue"}, {model : "Purple"} ]; });
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>What is your favorite color?</p> <select ng-model="selectedColor" ng-options="x.model for x in colors"> </select> <input type="radio" ng-model="colors.model" value = "{{selectedColor.model}}"> Red <input type="radio" ng-model="colors.model" value = "{{selectedColor.model}}"> Green <input type="radio" ng-model="colors.model" value = "{{selectedColor.model}}"> Blue <input type="radio" ng-model="colors.model" value = "{{selectedColor.model}}"> Purple </div> </body> </html>
谢谢
1 个解决方案
解决方案1
1 已采纳 2016-10-04 16:24:29
One way is use the same ng-model which means you want to think through what the corresponding value should be for the radios and that would be the objects in the array 一种方法是使用相同的ng-model ，这意味着您要仔细考虑无线电的对应值以及数组中的对象
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.colors = [ {model : "Red"}, {model : "Green"}, {model : "Blue"}, {model : "Purple"} ]; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <p>What is your favorite color?</p> <select ng-model="selectedColor" ng-options="x.model for x in colors"> </select> <input name='rad' type="radio" ng-model="selectedColor" ng-value="colors[0]"> Red <input name='rad' type="radio" ng-model="selectedColor" ng-value="colors[1]" > Green <input name='rad' type="radio" ng-model="selectedColor" ng-value="colors[2]"> Blue <input name='rad' type="radio" ng-model="selectedColor" ng-value="colors[3]"> Purple </div>
Several other approaches would be use ng-change on each and update the other inside functions, or use a watch on different ng-model and update other in those watches 其他几种方法是在每个ng-change上使用ng-change并更新其他内部函数，或者在其他ng-model上使用手表并在这些手表中更新其他
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.