CODEWITHSUNDEEP
javascriptangularjsng-style
Alex
Alex

Reputation: 2062

Angular 1.x dynamically change element's width using user input

I'm creating dynamically an element that I need to have control over its width and position. I'm trying to change its style using an input with ng-model and ng-style directive in the created element, in the following manner:
JS:

function createElementAndAppend(){
    element = angular.element("<"+element+" id='inputTag' ng-click='selectClickedElm($event.currentTarget)' ng-style='{width: w + 'px'} placeholder='input'>");
    angular.element(document.getElementById('board')).append($compile(element)($scope));
}

HTML:

<input type="number" ng-model="w" placeholder="change width">

I'm getting an error:

Error: [$parse:ueoe] Unexpected end of expression: {width: w

Obviously the problem is with ng-style='{width: w + 'px'}. How do I write the plus sign to angular will know to interpret the value of w with px as thw final width of the element?

Upvotes: 1

Views: 120

Answers (1)

lealceldeiro
lealceldeiro

Reputation: 14958

I have not tested it, but this should work:

element = angular.element("<"+element+" id='inputTag' ng-click='selectClickedElm($event.currentTarget)' ng-style='{width: w + \"px\"}' placeholder='input'>");

Upvotes: 2

Related Questions