Thomas Juranek Thomas Juranek - 1 year ago 123
AngularJS Question

AngularJS ng-style with ng-model scope variable

I'm building a website to let users design their own mobile app. One side of the website has a form that the user fills out, and the other side has a live preview of the app based off of the form data. This is how it is set up:


$scope.primaryColor = "#325490";

Form Input:

<!-- Primary Color -->
<div class="form-group">
<label for="primaryColor" class="col-sm-2 control-label">Primary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="$parent.primaryColor">

Live Preview:

<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color':'{{$parent.primaryColor}}'}">

I have to use $parent because I am using ng-include on my index page to include the form.htm and preview.htm files. I have tested the form and I know it is changing all of the scope variables that I have, but the previewer is not changing. Any help is appreciated!

Answer Source

Remove {{}} and '' and it should work, like this:

<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color': $parent.primaryColor }">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download