Angular JS 范围输入问题

Angular JS range input issue

当移动所有角范围输入时,其余输入工作正常但是当移动另一个角范围时,所有角移动 1~3 个像素,这里可能是什么问题?

演示在这里: http://jsfiddle.net/g10fsxym/

代码:

var myApp = angular.module('myApp', []);

myApp.controller('myAppCtrlr', 函数($scope) {

var allcorners = new Quantity(5);
var topLeft = new Quantity(5);
var topRight = new Quantity(5);
var bottomLeft = new Quantity(5);
var bottomRight = new Quantity(5);

$scope.brCorners = allcorners;
$scope.brTopLeft = topLeft;
$scope.brBottomLeft = bottomLeft;
$scope.brTopRight = topRight;
$scope.brBottomRight = bottomRight;

$scope.brTopLeftCorner = function() {
    $scope.brTopLeft = topLeft;
}
$scope.brBottomLeftCorner = function() {
    $scope.brBottomLeft = bottomLeft;
}
$scope.brTopRightCorner = function() {
    $scope.brTopRight = topRight;
}
$scope.brBottomRightCorner = function() {
    $scope.brBottomRight = bottomRight;
}

$scope.brAllCorners = function() {
    $scope.brTopLeft = $scope.brCorners;
    $scope.brTopRight = $scope.brCorners;
    $scope.brBottomLeft = $scope.brCorners;
    $scope.brBottomRight = $scope.brCorners;
}});
function Quantity(value) {
var qty = value;
this.__defineGetter__("qty", function() {
    return qty;
});
this.__defineSetter__("qty", function(val) {
    val = parseInt(val);
    qty = val;
});}`

只需复制 $scope.brCorners(否则您将使用引用,因此当您更改一个变量时,另一个变量也会更改)。

Demo

    $scope.brAllCorners = function() {
      $scope.brTopLeft = angular.copy($scope.brCorners);
      $scope.brTopRight = angular.copy($scope.brCorners);
      $scope.brBottomLeft = angular.copy($scope.brCorners);
      $scope.brBottomRight = angular.copy($scope.brCorners);
    }