Ng-style not updating width and height
I am trying to create some circles that automatically resize. the problem is that the ng-style attribute doesn't update styles. http://plnkr.co/edit/3HxSzWIyUsLUW6UwFlRR see plunker
Javascript:
$scope.sellingPoints = {
'1':{ 'text':'Newest Technologies'},
'2':{ 'text':'Rapid Development'},
'3':{ 'text':'Scaleable Solutions'},
'4':{ 'text':'Custom CMS'}
};
$scope.kpi = {};
$scope.sizes = {};
$scope.onResize = function() {
console.log('joe');
var kpifit = document.getElementById('fit');
$scope.sizes.width = kpifit.offsetWidth - 30;
$scope.kpi.width = $scope.sizes.width + 'px';
$scope.kpi.height = $scope.sizes.width + 'px';
console.log($scope.sizes.width);
}
angular.element($window).bind('resize', function() {
$scope.onResize();
})
$timeout(function() {
$scope.onResize();
}, 300);
html:
<div class="row no-margin">
<div class="col-md-3 col-xs-6" id="fit" ng-repeat="item in sellingPoints">
<div class="kpi" ng-style="{'width':kpi.width,'height':kpi.height}">
<div class="kpi-text">{{item.text}}</div>
</div>
</div>
</div>
+3
source to share
2 answers
If you want the width value in ng-style
using the function
Below is an example of using a flowchart.
$scope.ChartDataList = [{
Ch_Name: 'Document',
Ch_Percentage: '40%',
getMaxLength() {
return '40%';
}
}, {
Ch_Name: 'Video/Audio',
Ch_Percentage: '66%',
getMaxLength() {
return '66%';
}
}
}]
0
source to share