Question

我跟随Angular的Lynda.com系列，并且我被卡住了。我对Angular相对较新，但问题实际上是我试图迭代数据从文件夹中提取图像并在图像上分配h1名称。这是我的代码：控制器

  var myApp = angular.module('myApp', []);
    //The Above Creates the variable set to an angular module
    //The following links the controller

    var myApp = angular.module('myApp', []);
    //The Above Creates the variable set to an angular module
    //The following links the controller

myApp.controller('MyController', function MyController($scope) {
            $scope.students =   {
        "name" : "Pedro Cunha",
        "shortname" : "Pedro_Cunha",
        "reknown" : "Front End Developer",
        "bio" : "Aspiring to become a front end dev."
    },
        {
        "name" : "Miguel Fonduer",
        "shortname" : "Miguel_Fondeur",
        "reknown" : "Front End Developer",
        "bio" : "Looking for become the next stack creator"
    },
        {
        "name" : "Dmitry Pavluk",
        "shortname" : "Dmitry_Pavluk",
        "reknown" : "UI/UX Engineer",
        "bio" : "Best questions ever"
    },
        {
        "name" : "Ethan Robinson",
        "shortname" : "Ethan_Robinson",
        "reknown" : "Biz Development/Marketing",
        "bio" : "Can analyze and sell the shit out of anything"
    },
        {
        "name" : "Xin Wang",
        "shortname" : "Xin_Wang",
        "reknown" : "Product Manager",
        "bio" : "Gets shit done"
    }
        });

HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp"> <!-- This Tells you which module to reference -->
<head>
    <meta charset="UTF-8">
    <title>Angular Demo</title>
    <script src="../lib/angular/angular.min.js"></script>
    <script src="../js/controllers.js"></script>
        <link rel="stylesheet" href="../css/style.css">
</head>
    <body>
        <div class="main" ng-controller = "MyController">
            <h2>{{students.name}}</h2>
            <ul class="studentlist">
                <li class="student cf" ng-repeat="student in students">
                    <img src="../images/{{student.shortname}}_tn.jpg" alt="Photo of {{student.name}}">
                    <div class="info">
                        <h2>{{student.name}}</h2>
                        <h3>{{student.reknown}}</h3>
                    </div>
                <li>
            </ul>

        </div>
    </body>
</html>

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*Base Styles*/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table;/* 2 */
}
.cf:after{
    clear: both;
}
html {
background-color: #023E54;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#023E54));
background-image: -webkit-linear-gradient(top, #023E54, #10AAC0);
background-image: -moz-linear-gradient(top, #023E54, #10AAC0);
background-image:-o-linear-gradient(top, #023E54, #10AAC0);
min-height: 100%;
height: auto;
}
body {
    font-family: Merriweather, Serif;
    font-size: 1rem;
    line-height: 160%;
    *zoom: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family:'Bree Serif', serif;
    font-weight: normal;
    color: #475b62;
    text-shadow: 1px 1px rgb(255, 255, 255, 1);
}

a {
    color: #145266;
    font-family: 'Bree Serif';
}
h1 {
    color: #145266;
    font-size: 2.2rem;
    line-height: 100%;
    margin-bottom: 10px;
}
h2 {
    font-size: 1rem;
    line-height: 90%;
    color: #c61c6f;
}

h3 {
    margin-top: 0;
    color: #bd3163;
    line-height: 110%;
    margin-bottom: 5px;
}
p {
    line-height: 1.3rem;
    color:#475b62;
    margin-bottom: 10px;
    font-family: 'Merriweather';
}
a.small {
    line-height: 100%;
    font-size: .9rem;
}
/*Search Styles*/
.search {
    background: #063642;
    color: #eee8d5;
    width: 90%;
    min-width: 320px;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 20px;
    padding: 20px 30px;
    z-index: 20;
}
.search h1{
    color: #EEE8D5;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 140%;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #c61c6f;
    color: #FCF4DC;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.btn .btn-left {
    float: left;
}
.btn .btn-right {
    float: right;
}
.btn:hover {
    background: #09576d;
}
.search label {
    display: none;
}
.search input {
    font-family: 'Droid Sans', Sans-serif;
    width: 100%;
    padding: 10px 0 10px 15px;
    font-size: 1rem;
    color: #475B62;
    background:rgba(255,255,255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    outline: 0;
}
.search .formgroup input {
    border: 1px solid rgba(0,0,0 0.3);
    display: inline;
    width: auto;
}
.search label.formgroup {
    display: inline;
    width: auto;
}
.search select {
    display: inline;
    padding: 10px;
    font-size: 1rem;
    color: #475B62;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0,0,0, 0.3);
    border-radius: 10px;
    outline: 0;
}
/*student List Styles*/

.studentlist {
    background: #EEE8D5;
    width: 50%;
    min-width: 290px;
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 30px;
    border-radius: 0 0 20px 20px;
    opacity: .95;
    z-index: 10;
}
.studentlist ul {
    margin: 0;
    padding: 0;
    background: #FDF6E3;
}
.student li {
    margin: 0;
    padding: 10px 10px 0 10px;
    border-bottom: 1px dotted black;
}
.student a {
    display: block;
    text-decoration: none;
}
.student li:hover {
    background: #FDF6E3;
}
.student img {
    display: block;
    float: left;
    width: 60px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.student info {
    display: block;
    float: left;
    padding-left: 120px !important;
}
.student:last-child {
    border-bottom: none;
}
.studentinfo {
    font-size: 1.1em;
    line-height: 160%;
    background: #EEE8D5;
    color: #0F4150;
    width: 90%;
    min-width: 320px;
    max-width: 620px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 20px 30px;
    border-radius: 10px;
    z-index: 20;
}
.studentinfo h1 {
    font-size: 1.8em;
    margin-bottom: 0;
}
.studentinfo img {
    width: 40%;
    max-width: 130px;
    border-radius: 20px;
}
.studentinfo .btn {

}

我认为问题在于Angular没有正确绑定。我不知道如何解决这个问题。我在控制台中看不到任何错误，但我之前已经开始工作了。当我把它放在＆＃34;＆＃34;一切都停止了。

任何帮助将不胜感激。谢谢！

Answer 1

为什么不使用

 <img ng-src="../images/{{student.shortname}}_tn.jpg" alt="Photo of {{student.name}}">

这是因为

在src属性中使用{{hash}}之类的Angular标记无法正常工作：浏览器将使用文字文本{{hash}}从URL中获取，直到Angular替换{{hash}}中的表达式。 ngSrc指令解决了这个问题。

参考 http://docs.angularjs.org/api/ng/directive/ngSrc

Answer 2

您需要在img标记中使用ng-src而不是src。

另外，正如Mark所说，你需要确保学生数组中的语法是正确的。

Answer 3

$scope.students应该是对象的数组。

$scope.students = [
  //objects go in here
];

注意：如果你打开错误控制台，你肯定会看到错误，这至少会突出显示你的语法有问题。

角度没有绑定到img标签内部

3 个答案: