[英]bind radio buttons with slider angularjs
我试图使用angularjs将这些单选按钮与滑块绑定。 如果用户选择单选厘米单选按钮，则如果像素选择为1，则滑块应动态移动到10，文本框显示为10，依此类推。 并且默认情况下应从1（像素）开始。
"use strict"; // Creates the "backend" logical support for appMyExample var myModule = angular.module("appMyExample", []); // define a function to create a new slider at locID (expected to be a div) var createSlider = function (locID, label, guiModel) { var elm = document.getElementById(locID); elm.innerHTML = "<b>" + label + "</b><br>"; elm.innerHTML += "Bar : <input type='range' min=\\"1\\" max='50' ng-model='" + guiModel + "'>"; elm.innerHTML += "<input type='text' ng-model='" + guiModel + "' size='1'>"; }; // Now, call the GUI creation functions createSlider("idLeft", "LeftSlider", "mLeftModel"); myModule.controller("exCtrl", function ($scope) { $scope.mLeftModel = "1"; });
<body > <div ng-app="appMyExample" ng-controller="exCtrl" > <p><b>Unit:</b><input name='rad' type="radio" > Pixels (1) <input name='rad' type="radio" > Millimeters (5) <input name='rad' type="radio" > Centimeters (10) <input name='rad' type="radio" > Meters (50) </p> <table> <tr> <td> <div id="idLeft" style="outline: 2px solid"> </div> </td> </tr> </table> <label> Total displacement: <input type="text" value="{{mLeftModel}}" ></label> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </body>
谢谢
我认为您应该将ng-change用于广播，并基于此重新初始化滑块。
不要忘记为单选按钮指定ng-value 。
"use strict"; // Creates the "backend" logical support for appMyExample var myModule = angular.module("appMyExample", []); // define a function to create a new slider at locID (expected to be a div) var createSlider = function (locID, label, guiModel) { var elm = document.getElementById(locID); elm.innerHTML = "<b>" + label + "</b><br>"; elm.innerHTML += "Bar : <input type='range' min=\\"1\\" max='"+guiModel+"' ng-model='" + guiModel + "'>"; //elm.innerHTML += "<input type='text' ng-model='" + guiModel + "' size='1'>"; }; myModule.controller("exCtrl", function ($scope) { $scope.flag = 1; createSlider("idLeft", "LeftSlider", $scope.flag); $scope.changeSlider = function(flag){ createSlider("idLeft", "LeftSlider", flag); }; });
<body > <div ng-app="appMyExample" ng-controller="exCtrl" > <p><b>Unit:</b><input name='rad' ng-model="flag" type="radio" ng-value="1" ng-change="changeSlider(1)"> Pixels (1) <input name='rad' ng-model="flag" type="radio" ng-value="5" ng-change="changeSlider(5)"> Millimeters (5) <input name='rad' ng-model="flag" type="radio" ng-value="10" ng-change="changeSlider(10)"> Centimeters (10) <input name='rad' ng-model="flag" type="radio" ng-value="50" ng-change="changeSlider(50)"> Meters (50) </p> <table> <tr> <td> <div id="idLeft" style="outline: 2px solid"></div> </td> </tr> </table> <label> Total displacement: <input type="text" value="{{flag}}" ></label> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </body>
我认为select更适合，复选框擅长于正确/错误的事情。
并使用ng-model进行两种方式的数据绑定。
我更改您的代码以执行您想要的操作，但这只是您的一个示例。 :-)
"use strict"; // Creates the "backend" logical support for appMyExample var myModule = angular.module("appMyExample", []); // define a function to create a new slider at locID (expected to be a div) var createSlider = function (locID, label, guiModel) { var elm = document.getElementById(locID); elm.innerHTML = "<b>" + label + "</b><br>"; elm.innerHTML += "Bar : <input type='range' min=\\"1\\" max='50' ng-model=\\"mLeftModel\\">"; elm.innerHTML += "<input type='text' ng-model=\\"mLeftModel\\" size='1'>"; }; // Now, call the GUI creation functions createSlider("idLeft", "LeftSlider", "mLeftModel"); myModule.controller("exCtrl", function ($scope) { $scope.mLeftModel = "1"; });
<body > <div ng-app="appMyExample" ng-controller="exCtrl" > <p><b>Unit:</b> <select name="singleSelect" ng-model="mLeftModel"> <option value="1">Pixels (1)</option> <option value="5">Millimeters (5)</option> <option value="10">Centimeters (10)</option> <option value="50">Meters (50)</option> </select> </p> <table> <tr> <td> <div id="idLeft" style="outline: 2px solid"> </div> </td> </tr> </table> <label> Total displacement: <input type="text" value="{{mLeftModel}}" ng-model="mLeftModel"></label> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </body>
AngularJS无法将单选按钮与嵌套范围内的模型绑定
[英]Angularjs unable to to bind radio buttons with model inside nested scopes
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.