CODEWITHSUNDEEP
javascriptangularjs
Mike Roosa
Mike Roosa

Reputation: 4802

Why is angularjs not resolving my object correctly?

I am building an angularjs app and having a small issue. I am populating a list of projects then filtering that list based on some conditions. When viewing on the web page, everything looks fine and there doesn't appear to be any issues.

However, when viewing the console in chrome, I see this issue when the page loads:

GET http://localhost:8000/app/img/customers/%7B%7Bproject.LogoPath%7D%7D 404 (Not Found) jquery-1.9.1.js:6063
GET http://localhost:8000/app/img/customers/%7B%7Bproject.LogoPath%7D%7D 404 (Not Found) angular-scenario.js:11101

It appears to place the first GET error up then execute my groupBy filter (twice) then the second GET error comes up.

The really strange part is that everything on the web page appears correct and there are no missing logos or other project undefined errors.

Here is the code where the img path is generated:

<article ng-repeat="pm in projects|filter:colorFilter|groupBy:'LeadProjectManagerName'">
    <section class="project-section-header">
        <h3>{{pm}} <small>{{(projects|filter:pm|filter:{ColorStatus:colorFilter}).length}} projects</small></h3>
    </section>
    <div class="project project-{{project.ColorStatus}}" ng-class="{'project-last':($index+1) % 4 == 0}" ng-repeat="project in projects|filter:pm|filter:{ColorStatus:colorFilter}">
        <img src="img/customers/{{project.LogoPath}}" class="project-logo">
        <h1><a href="#/project/{{project.Id}}/dashboard">{{project.Name}}</a></h1>
        <p class="project-progress">{{(project.CompletedTasks / project.ScheduledTasks) * 100 || 0}}%</p>
        <p class="project-icons"><i class="icon-ok"></i> {{project.CompletedTasks}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-calendar"></i> {{project.ScheduledTasks}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-remove"></i> {{project.MissedTasks}} </p>
    </div>
</article>

All my data is being displayed and all the logos are being displayed as well. I have no idea where this error is coming from and why it has the literal project.LogoPath instead of the value of project.LogoPath.

Any ideas?

Upvotes: 0

Views: 312

Answers (2)

vipulsharma
vipulsharma

Reputation: 1252

replacing src with ng-src should work

<article ng-repeat="pm in projects|filter:colorFilter|groupBy:'LeadProjectManagerName'">
    <section class="project-section-header">
        <h3>{{pm}} <small>{{(projects|filter:pm|filter:{ColorStatus:colorFilter}).length}} projects</small></h3>
    </section>
    <div class="project project-{{project.ColorStatus}}" ng-class="{'project-last':($index+1) % 4 == 0}" ng-repeat="project in projects|filter:pm|filter:{ColorStatus:colorFilter}">
        <img ng-src="img/customers/{{project.LogoPath}}" class="project-logo">
        <h1><a href="#/project/{{project.Id}}/dashboard">{{project.Name}}</a></h1>
        <p class="project-progress">{{(project.CompletedTasks / project.ScheduledTasks) * 100 || 0}}%</p>
        <p class="project-icons"><i class="icon-ok"></i> {{project.CompletedTasks}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-calendar"></i> {{project.ScheduledTasks}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-remove"></i> {{project.MissedTasks}} </p>
    </div>
</article>

Upvotes: 1

Eduard Gamonal
Eduard Gamonal

Reputation: 8031

you have to use ng-href to resolve the {{ variables.of.scope }}. otherwise it takes the literal string. same for ng-src

Upvotes: 5

Related Questions