CODEWITHSUNDEEP
javascripthtmlcssangularjs
Pedro
Pedro

Reputation: 67

angular not binding inside of an img tag

I'm following along with Lynda.com series for Angular and I'm stuck. I'm relatively new to Angular but essentially the problem is that I'm trying to iterate through data to pull images from a folder and assign an h1 name onto the image. Here is my code: Controllers

  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 {

}

I think that the problem is that Angular isn't binding properly. I have no clue how to fix that though. I see no errors whatsoever in the console but I had it working earlier. When I put it inside of "" it all stopped working.

Any help would be appreciated. Thanks!

Upvotes: 0

Views: 435

Answers (3)

thescientist
thescientist

Reputation: 2948

$scope.students should be an array of objects.

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

note: if you had you error console open, you would definitely be seeing errors, which would at least highlight that there was a problem with your syntax.

Upvotes: 0

himangshuj
himangshuj

Reputation: 730

why don't you use 

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

this is because

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

Reference http://docs.angularjs.org/api/ng/directive/ngSrc

Upvotes: 1

Tharaka
Tharaka

Reputation: 2395

You need to use ng-src instead of src in your img tag.

Additionally, as Mark mentioned, you need to ensure that the syntax in student array is correct.

Upvotes: 0

Related Questions