Angular failing to bind data within an image element

I am currently following an Angular series on Lynda.com and facing a roadblock. Although I am new to Angular, the main issue is that I am attempting to iterate through data in order to fetch images from a folder and assign an h1 name to each image. Below is the code snippet:

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

...

I suspect that the problem lies in Angular not binding properly. I am unsure how to resolve this issue. There are no errors visible in the console, yet the functionality stopped working once I enclosed it in "". Any assistance on resolving this matter would be greatly appreciated. Thank you!

Answer №1

why not try using

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

this approach is preferred over simply using src attribute because

When using Angular markup like {{hash}} in a src attribute, the browser will attempt to fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive effectively addresses and resolves this issue.

For further information and details, visit http://docs.angularjs.org/api/ng/directive/ngSrc

Answer №2

$scope.students needs to be structured as an array containing objects.

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

Take note that having your error console open would alert you to any syntax issues that may arise, indicating there is a problem with the code.

Answer №3

Make sure to utilize ng-src in place of src within your image tag.

Furthermore, as Mark pointed out, double check that the syntax within the student array is accurate.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make sure to search for the CSS class in the Twig file that is compatible with Vue.js and functions

I am currently working on a twig file for a Drupal 8 project and I am still trying to familiarize myself with it. In the past, I had a Vue file where I included the following code snippet: <div class="dropdown-menu":aria-labelledby="menu ...

Validating forms in Angular-CLI

The code below displays the output of my executed code: I am facing an issue with validations. Even when clicking the AddEmployee button without entering any data, it still gets added to the dataset. Below is the HTML code for app.component.html: <div ...

Why is the event handler producing no value?

Imagine if I tried to attach a jQuery click event handler to one of the functions in my objects, but for some reason it keeps returning undefined on my properties. Why is this happening? var buttonView = { label : 'underscore', ...

Using Selenium Python to interact with HTML elements based on their text content

My task is to interact with an HTML element that has an id like <span class="a-button-inner"> <input name="submit.addToCart" aria-label="Aggiungi al carrello dal venditore VERONCART SRL con prezzo 775,00&nbsp;€ & ...

Tips for interacting with a JSON object within the same file where it is required

While working on an AJAX call, I encountered the following code: var getHoursOfOperation = function() { $.ajax('hours-of-operation.json') .done(function(data, status, xhr){ now = window.moment(xhr.getResponseHeader(' ...

Displaying spherical objects (or individual points) within a particle network

In my project, I am utilizing the Three.JS library to showcase a point cloud on a web browser. The point cloud is created once at the beginning and remains static with no additional points being added or removed. However, it does require functionality for ...

Elevate a division within its container

Is there a way to make a smaller div positioned at the top when it's placed next to a larger one in the same container? I'm looking for a solution that doesn't involve using position-relative and manually adjusting the placement. Take a loo ...

The CSS property 'clear:both;' is not functioning properly on IE7 browsers whereas works fine on IE8/IE9, Firefox, Chrome, and other browsers

I have been receiving feedback from visitors about some issues on one of my websites. Those who reached out to us are using IE7 on Windows XP. I was able to recreate the problem by using IE7 or by mimicking it in compatibility mode with IE7 document mode o ...

Changing elements within Angular Scope while in ng-repeat loop

Creating an HTML form using ng-repeat to generate form elements from an object in the scope is a common practice. However, issues may arise when trying to update values outside of the ng-repeat block. Here's a basic example: <div ng-app="App"> ...

Tips for choosing a loaded element using the jQuery load() method

I am currently facing a challenge with the following (here is a snippet of code to illustrate): <div id="container"></div> <script type="text/javascript"> $('#container').load('content.html'); $('.eleme ...

Troubleshooting z-index problem with background image and parent tag of image

I seem to be facing an issue with the z-index property. Here is the code snippet in question: <div id="sidebarCont"> <div id="avatarCont" class="mask"> <img id="" class="" src="img.jpg" alt=""/> </div> And here is the correspo ...

Issue with karma-ng-html2js-preprocessor failing to generate modules

Struggling to configure the karma-ng-html2js-preprocessor. While Karma has been successfully detecting all my JavaScript files, it's having trouble generating a module from the HTML preprocessor. Take a look at my options object below. I've spec ...

How can I stop the counter from running when the modal is hidden?

I am looking to increment a counter only when a modal is being displayed. However, I am facing an issue where the counter continues to increase even after the modal has been closed. Can someone provide insights on what might be wrong with my code snippet ...

Utilizing Different Themes Based on Route with React-Router and Material-UI

I'm currently learning how to utilize the Material-UI library. As I explore its capabilities, I have discovered that I can use createStyles within a component to style it, and I can also leverage createMuiTheme to establish a global theme. My goal is ...

Kendo UI Web - MultiSelect: choosing an option multiple times

Currently, I am encountering an issue with the Kendo UI MultiSelect widget when trying to select an option multiple times. An example of this is shown in the image below where I want to choose Schindler's List again after selecting The Dark Knight. Ho ...

The intervals in hooks seem to be malfunctioning and not updating the date and time as expected

I am trying to continuously update the date and time every minute using React hooks. However, I am facing difficulty in updating the time properly. const Link = (props) => { let date = new Date(); const [dateTime, setDateTime] = useState({ cu ...

"Encountering an undefined object in AngularJS when trying to implement attribute two

Encountering an issue with a feature in AngularJS, the scenario is as follows: A controller and directive are defined like this: helpers.directive('someEvent', function() { ... scope: { api: '=' } ... contr ...

The natural elements are so minuscule they are practically nonexistent

When referencing my DOM element using ViewChild in the code, I sometimes encounter an issue where the offsetHeight and offsetWidth are zero in the ngAfterViewInit hook. This leads me to believe that the element has not yet been rendered in the DOM. Are the ...

What is the best approach to create a customized array using or not using spread syntax in this scenario?

Any suggestions on simplifying and enhancing the code provided below? The current code works as intended when myarr.length === 2: [...myarr[0].arrk.map(myfunc), ...myarr[1].arrk.map(myfunc), ...myarr[2].arrk.map(myfunc)] How can we adjust the above code ...

Datagrid in AngularJS does not update filters upon refresh

Currently, I am attempting to implement name filtering with Angular JS using the following library: https://github.com/angular-data-grid/angular-data-grid.github.io. However, an issue arises when searching as the results do not refresh immediately; only up ...