用angularjs和javascript绑定单选按钮

binding radio buttons with angularjs and javascript

本文关键字：绑定 单选按钮 javascript angularjs      更新时间：2023-09-26

我试图在:"总位移"中显示各自单位的名称。而不是显示"总位移在1"，它应该显示"总位移在像素"，而不是"总位移在10"，它应该显示"总位移在厘米"等动态，而不会搞乱当前值和绑定?我只想在那个地方改变它，而不是在文本框中。我已经在单选按钮中使用了ng-model和ng-value，如果我改变单选按钮中的ng-value，它会弄乱滑块旁边的文本框和底部的文本框，我不想那样。有什么办法可以做到吗?

"use strict";
var app = angular.module('myApp', []);
var createSlider = function(locID) {
  var elm = document.getElementById(locID);
  elm.innerHTML += "Scale : <input type='range' min='"1'" max='50' ng-model='"mLeftModel'">";
  elm.innerHTML += "<input type='text' ng-model='"mLeftModel'" size='1'>";
};
createSlider("idLeft");
app.controller("exCtrl", function($scope) {
  $scope.mLeftModel = "1";
  $scope.units = [{
    model: "Pixels",
    number: 1
  }, {
    model: "Millimeters",
    number: 5
  }, {
    model: "Centimeters",
    number: 10
  }, {
    model: "Meters",
    number: 50
  }];
});
<div ng-app="myApp" ng-controller="exCtrl">
  <input name='rad2' type="radio" ng-model="mLeftModel" ng-value="1">Pixels
  <input name='rad2' type="radio" ng-model="mLeftModel" ng-value="5">Millimeters
  <input name='rad2' type="radio" ng-model="mLeftModel" ng-value="10">Centimeters
  <input name='rad2' type="radio" ng-model="mLeftModel" ng-value="50">Meters
  <table>
    <tr>
      <td>
        <div id="idLeft" style="outline: 3px solid"></div>
      </td>
    </tr>
  </table>
  <label>Total displacement in {{mLeftModel}}:
    <input type="text" ng-model="mLeftModel">
  </label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

试试这个，Total displacement in {{(units | filter: {'number': mLeftModel})[0]['model'] }}

使用ng-repeat指令获取多个单选按钮。

<input ng-repeat="unit in units" name='rad2' type="radio" ng-model="mLeftModel" ng-value="unit"> {{unit.model}}

显示标签使用:

<label>Total displacement in {{mLeftModel.model}}:    {{mLeftModel.number}} </label>
相关文章：