使用angularjs获取html外的数据

Question

我有以下问题。 我有一个特定大小的div列表。当用户选择左侧的一个div时，他们可以在右侧的视图中编辑此信息。 （如图所示）。

示例：当用户选择第二个选项时（如图所示），div应该在右侧打开并进行精确测量。

我使用到目前为止的代码制作了JsFiddle。我当时可以用10px来调整div的大小。我唯一能弄清楚的是如何在左侧显示div的特定测量结果显示在减号和加号按钮之间。

我现在得到这样的盒子的宽度和高度。

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

但我想绑定我的数据：JsFiddle

Answer 1

我更新了小提琴 https://jsfiddle.net/5y8ba50x/3/

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

没关系。

Answer 2

您想使用AngularJS吗？以下是一个示例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;
}