Get data outside html with angularjs

Question

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).

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

your fiddle does not match your given problem, how someone can make some changes and help you.. — Zohaib Ijaz
– Zohaib Ijaz, Commented Nov 18, 2015 at 14:57
I'm sorry can you please explain what you don't understand so I can edit it and make it more clear. — MarLen
– MarLen, Commented Nov 18, 2015 at 14:59
you are saying that when user clicks on buttons on left side with different dimentions, values between - and + should change, and there are no such buttons in fiddle.. maybe buttons can be dropdown but still missing.. — Zohaib Ijaz
– Zohaib Ijaz, Commented Nov 18, 2015 at 15:01
Okay I think I get it. When you click on the - and + the div starts expanding from 0px. I want it to start expanding from the values that are given on the left. So If I select an option that is 100px by 100px. By clicking on the + it should become 110px by 100px. — MarLen
– MarLen, Commented Nov 18, 2015 at 15:07
I tried jsfiddle.net/5y8ba50x/3 and now it starts from given value — Zohaib Ijaz
– Zohaib Ijaz, Commented Nov 18, 2015 at 15:12

Zohaib Ijaz · Accepted Answer · 2015-11-18 15:11:25Z

1

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

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

is it ok.

answered Nov 18, 2015 at 15:11

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rokoala · Accepted Answer · 2015-11-18 16:01:09Z

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

Collectives™ on Stack Overflow

Get data outside html with angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related