Почему angularjs не разрешает мой объект правильно?

Question

Я создаю приложение angularjs и имею небольшую проблему. Я заполняю список проектов, а затем фильтрую этот список, основываясь на некоторых условиях. При просмотре на веб-странице все выглядит отлично, и, похоже, не возникает никаких проблем.

Однако при просмотре консоли в хроме, я вижу эту проблему при загрузке страницы:

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 

Оказывается, чтобы поместить первую ошибку Вставай затем выполнить мой GroupBy фильтр (дважды), то второй GET появляется ошибка.

Действительно странная часть состоит в том, что все на веб-странице отображается правильно и отсутствуют отсутствующие логотипы или другие неопределенные ошибки проекта.

Вот код, где генерируется путь IMG:

<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> 

Все мои данные отображаются и все логотипы показываются, а также. Я понятия не имею, откуда эта ошибка, и почему у нее есть литерал project.LogoPath вместо значения project.LogoPath.

Любые идеи?

Answer 1

Вы должны использовать ng-href для разрешения {{ variables.of.scope }}. в противном случае это займет буквальную строку. то же самое для ng-src

Answer 2

заменяющего SRC с нг-Src должен работать

<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>