Question

我正在建立一个angularjs应用程序，并有一个小问题。我正在填充项目列表，然后根据某些条件过滤该列表。在网页上查看时，一切看起来都很好，似乎没有任何问题。

但是，在使用chrome查看控制台时，我会在页面加载时看到此问题：

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

似乎放置了第一个GET错误，然后执行我的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

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

为什么angularjs无法正确解析我的对象？

2 个答案: