Angular: a part of view does not update

Question

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>
</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 · Accepted Answer · 2016-02-08 12:51:11Z

2

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

$scope.ngModel

By

$scope.data.ngModel

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 :

$scope.data={};

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

answered Feb 8, 2016 at 12:51

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NEHAVERMA8 · Accepted Answer · 2016-02-19 12:53:28Z

0

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>

answered Feb 19, 2016 at 12:53

NEHAVERMA8

2611 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular: a part of view does not update

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related