Question

我试图使用angularjs将这些单选按钮与滑块绑定。如果用户选择无线电厘米单选按钮，则滑块应动态移动到10和文本框显示10，如果像素被选择为1，依此类推。它应该默认从1（像素）开始。

＆＃13;

"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";
});

＆＃13;

<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>

＆＃13;

THKS

Answer 1

我认为你应该使用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>

Answer 2

我认为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绑定单选按钮

2 个答案: