Home Ask Login Register

Developers Planet

Your answer is one click away!

NEHAVERMA8 February 2016

Angular: a part of view does not update

I have a directive template with the following code

<div class="colorpicker">
<div>Chosen color</div>
<div class="color_swatch" style="background-color: {{ngModel}}">&nbsp;</div>
<div class="clearfix"></div>

<div>Standard colors</div>
<div class="color_squares">
    <div ng-repeat="color in colorList">{{color.trim() == ngModel.trim()}} //does not update
        <div class="color_swatch" style="background-color: {{ color }};"></div>
<div class="clearfix"></div>

In the directive, I update the ngmodel using the below code to the color that was clicked - the div next to "chosen color" is updated with the selected color. But, the expression "{{color.trim() == ngModel.trim()}}" always amounts to false.

{{color.trim() == ngModel.trim()}}

I have debugged the code and the values are exactly the same.

What I am missing?


Walfrat February 2016

This is probably because your variable is precisely named 'ngModel' see that article for more explanation : http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/

To resume this article : never use raw fields use always a dot. So in your scope change




And in your html change ngModel by data.ngModel.

When using dot you may have some undefined error, this is because you have to initialize the object :


Of course you can jsut rename your variable, but you may still have a problem with others directives.

NEHAVERMA8 February 2016

I solved this by removing curly braces around color and using ng-style

 <div class="color_swatch" id="colorpicker_selected_color" ng-style="{'background-color': selectedColor}" >&nbsp;</div>

Post Status

Asked in February 2016
Viewed 2,866 times
Voted 11
Answered 2 times


Leave an answer

Quote of the day: live life