CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
MarLen
MarLen

Reputation: 196

Get data outside html with angularjs

I have the following problem. I have a list of div with a specific size. When the user selects one of the divs on the left, they can edit this information in the view on the right. (shown on the image).

enter image description here

Example: When the user selects the second option (as shown in the image) the div should open on the right with that exact measurements.

I made a JsFiddle with the code that I have so far. I can resize the div with 10px's at the time. The only thing I can't figure out is how to get the specific measurements of the div's on the left to show up inbetween the minus and plus buttons.

I now get the width and height of the box like this. 

 var measureDivs = function () {
    $('.divs-width').html($('.box').width());
    $('.divs-height').html($('.box').height());
};

But I want to bind my data like this:JsFiddle

Upvotes: 0

Views: 67

Answers (2)

Rokoala
Rokoala

Reputation: 461

Do you want to use AngularJS? Here is one example JsFiddle

JS

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

app.controller('BoxController',['$scope',function($scope){

var CONST = 10;

$scope.box = {
    width:10,
    height:10
};

$scope.boxCss = {
    'background-color':'blue',
    'width':$scope.box.width+'px',
    'height':$scope.box.height+'px'
}

$scope.smallerHeight = function(){
    $scope.box.height-=CONST;
    $scope.boxCss.height=$scope.box.height + 'px';
}

$scope.biggerHeight = function(){
    $scope.box.height+=CONST;
    $scope.boxCss.height=$scope.box.height + 'px';
};

$scope.smallerWidth = function(){
    $scope.box.width-=CONST;
    $scope.boxCss.width=$scope.box.width + 'px';
}

$scope.biggerWidth = function(){
    $scope.box.width+=CONST;
    $scope.boxCss.width=$scope.box.width + 'px';
}

}]);

HTML

<div ng-app='BoxApp'>
   <div ng-controller='BoxController'>
    <div ng-style="boxCss" class="animation-box"></div>

    <button ng-click="smallerWidth()" class="SmallerWidth"> - </button>
    {{box.width}}
    <button ng-click="biggerWidth()" class="BiggerWidth"> + </button>    </br>

    <button ng-click="smallerHeight()" class="SmallerHeight"> - </button>
    {{box.height}}
    <button ng-click="biggerHeight()" class="BiggerHeight"> + </button>
   </div>
</div>

CSS

.animation-box {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

Upvotes: 0

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

I updated the fiddle https://jsfiddle.net/5y8ba50x/3/

var w = 100, h = 100;
$(".box").width(w);
$(".box").height(h);

is it ok.

Upvotes: 1

Related Questions