如何將單選按鈕綁定到下拉菜單？
[英]How to bind radio a drop down menu with radio buttons?
問題描述
我如何使下拉菜單與單選按鈕同步，以便當我選中一個按鈕時，下拉菜單使用相同的選項會動態變化？
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
一種方法是使用相同的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>
其他幾種方法是在每個ng-change上使用ng-change並更新其他內部函數，或者在其他ng-model上使用手表並在這些手表中更新其他
制作一個包含單選按鈕的下拉菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.