0
"Total displacement in"にそれぞれのユニットの名前を表示しようとしています。 「Total displacement in 1」と表示する代わりに、「Total displacement in cm」と表示する必要があります。「Total displacement in cm」と表示されるはずです。バインディング？私はその場所ではテキストボックスに入れずに変更したいだけです。私は既にラジオボタンでng-modelとng-valueを使用しています。ラジオボタンのng値を変更すると、スライダーの横にあるテキストボックスと一番下のテキストボックスが乱れてしまいます。それ。それを達成する方法はありますか？angularjsとjavascriptのラジオボタンをバインドする
"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>