如何将下拉菜单与单选按钮同步,以便当我选中一个按钮时,下拉菜单会使用相同的选项动态更改?
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>
最佳答案
一种方法是使用相同的ng-model
,这意味着您需要考虑 radio 的相应值应该是什么,这将是数组中的对象
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>
其他几种方法可以在每个方法上使用 ng-change
并更新其他内部函数,或者在不同的 ng-model
上使用 watch 并更新这些 watch 中的其他方法
关于javascript - 如何将单选下拉菜单与单选按钮绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39856897/