Angular JS range input issue

Question

when the all corners range input is moved, the rest of the inputs work fine but when another corner range is moved the all corners move 1~3 pixels, what could be the issue here?

Demo here: http://jsfiddle.net/g10fsxym/

code:

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

myApp.controller('myAppCtrlr', function($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;
});}`

score 0 · Accepted Answer · answered Apr 08 '15 at 13:44

Just make a copy of $scope.brCorners (otherwise you are working with references, so when you change one variable the another is also changed).

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

Angular JS range input issue

1 Answers1