如何使用单选按钮将下拉菜单绑定到收音机？

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>

thanks

1 个解决方案

#1

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模型,这意味着你想要考虑无线电的相应值应该是什么,这将是数组中的对象

 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-model上使用手表并更新其他手表

#1