使用 angularjs 和 javascript 绑定单选按钮答案

【问题标题】：binding radio buttons with angularjs and javascript使用 angularjs 和 javascript 绑定单选按钮
【发布时间】：2016-10-13 11:32:15
【问题描述】：

我正在尝试在“总位移”中显示各个单位的名称。与其显示“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>

【问题讨论】：

标签： javascript html angularjs data-binding

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：