ng-source fails to display a value

I am currently using angular version 1.4.5 in conjunction with a Django v1.8 application as I work on implementing a fresh layout for my website. Below is a snippet of my view:

<div class="page animsition" ng-app="AppUI">
    <div class="page-content padding-30 blue-grey-500"
         ng-controller="DisplayManageController">
        <ul>
            <li ng-repeat="feed in items">
                <a>{{ feed.type }}</a>
                <img ng-src="feed.obj.image"/>
                <em ng-bind="feed.obj.text"></em>
            </li>
        </ul>
    </div>
</div>

Highlighted below is the Angular controller code:

var AppUI = angular.module('AppUI');
AppUI.controller('DisplayManageController', ['$scope', 'display', function ($scope, display) {
    $scope._display = display.items({'id': 71});
    $scope.items = [];
    $scope._display.$promise.then(function (result) {
        angular.forEach(result, function (value) {
            $scope.items.push(value);
        });
    });
}]);

Shown here is the resulting HTML after the promise updates:

<li ng-repeat="feed in items" class="ng-scope">
    <a></a>
    <img ng-src="feed.obj.image" src="feed.obj.image">
    <em ng-bind="feed.obj.text" class="ng-binding">Blabla #somehashtagfromme</em>
</li>

This is the content of "items":

[
{$$hashKey:"object:3",group_id: 1,id: "562a1a48942fbd0d9016617e",obj:{image:"https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12080420_855923527854550_1926591603_n.jpg",text:"Nefesler tutuldu"},type:"instagram"},
{$$hashKey:"object:2",group_id: 1,id: "5627a75e942fbd0d7ed19748",obj:{image:"https://pbs.twimg.com/media/CR2VePxUwAAVqtn.jpg", text:"bu zamanların ruhu"},type:"twitter"},
...
]

While 'ng-repeat' successfully repeats all items as feed objects, I'm puzzled why the curly braces and 'ng-src' do not compile or return empty values?

P.S.: I attempted to use 'ng-src={{feed.obj.text}}' but did not observe any changes in the outcome.

Answer №1

Make sure to use ng-src="{{feed.obj.text}}". Remember, it's quotes and double curly brackets.

If that solution doesn't resolve the issue, try inserting

<pre>{{feed.obj | json}}</pre>
right after the closing </a> tag and before the <img> tag. This will help identify any problems with the object.

Additionally, when working with Django, ensure that you're rendering the template as raw. Otherwise, Django may interpret the double curly brackets as part of its template syntax.

Answer №2

Check out this plunker to see your code in action:

http://plnkr.co/edit/ZdLJmF9tPvOwMhRgC7X0?p=preview

Remember to always use curly braces for interpolation in AngularJS.

<ul>
    <li ng-repeat="data in items">
        <a>{{ data.name }}</a>
        <img ng-src="{{data.img}}"/>
        <em ng-bind="{{data.desc}}"></em>
    </li>
</ul>

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

Navigating to various views using both forward and back buttons in AngularJS

In the index.html file, there is a footer with next and previous buttons. The code structure looks like this: <html ng-app="myapp"> <body ng-controller="myController"> <div id="header">Header</div> <div id="content"><ng-vi ...

Receiving a positive server response without needing to trigger the Ajax route in a NodeJs/Express application

Setting up the login route: app.use('/login', require('./routes/login')); The 'login' module includes the route to display the login HTML page and validate the login using an Ajax call. var router = require('express&ap ...

Is there a method in React to execute an if statement based on the detection of changed props?

Within my current setup, I have a component that maintains an array of posts. This component receives a prop called sortBy, which instructs it to retrieve data sorted by either popular or new. On initialization, the component fetches the posts and stores t ...

Tips for transferring values between functions within the same scope

Currently, I am facing an issue where I have two functions within the same controller and I am attempting to pass a value from one function to another. Unfortunately, I keep receiving an error that says TypeError: Cannot read property 'activeDataset&a ...

Displaying an image with a JavaScript variable is a common task in web

I have a Javascript code snippet below where the image name "samson decosta" is stored in a MySQL database. I am retrieving this image and trying to display it as a background_image in a div. document.getElementById("image_chk").style.backgroundImage="url ...

Why does async return an empty array the first time it is used?

I'm currently developing a JavaScript application using Node.js. I have been experimenting with the async/await function. After running the code snippet below, I noticed that the first time I send a GET request, I receive an empty array. However, if ...

Steps for loading a directive into a module after instantiation with requirejs

Let me share a bit about my current challenge. Initially, I had all the necessary directive files injected into my main module in app.js using requirejs paths, and everything was functioning smoothly. It looked something like this: define(['angularAM ...

Changing the color of individual buttons within a subset of buttons from a larger group of buttons

Is there a way to change the button colors individually when they are clicked? Requirements: The default color of the buttons should be grey. Upon first click, they should turn green. After the second click, they should become red. Finally, on the third ...

Troubleshooting Problem with Facebook Messenger Bot Webhook

I received the following notification: Your Webhooks subscription callback URL is not currently accepting updates. We have observed that your Webhooks subscription for callback URL has been inactive for at least 16 minutes. Please ensure that your cal ...

Guide on creating a custom directive called 'ng-let' to associate an expression with a variable

If I want to create a custom directive that functions like ng-repeat but assigns a name to a single variable: instead of writing code like this: ng-repeat="summary in data.accounts.all.summaryAsArray()" I could write something similar to this: ng-let=" ...

Parse through all objects in JavaScript in order to locate a specific object key

Currently, I am in the process of troubleshooting a system that was developed by another individual. The issue at hand involves a minified library that initiates an ajax (xhr) call to an external data source upon page load and then stores the retrieved dat ...

Unable to trigger onDragEnter event in Angular

I am currently incorporating Angular1 into my app and am facing an issue. I want to trigger a function when a user drags a file to a specific area (div) on the page. I have attempted using ondragenter, but the function defined in the controller is not be ...

What causes the in operator in AngularJS to display index values rather than actual objects?

I have an array containing three person objects. I'm attempting to print each object using the for...in loop, but instead of getting the object itself, I'm receiving the index value (0, 1, 2) of each object. Here's the code snippet I'm ...

Execute the function at intervals of 2 seconds until the variable is altered

Is there a way to make sure that the interval function stops running once theImage length exceeds 0? The Code I'm Using var theImages = $('.awesome-slider .slides img'); function checkImages(){ theImages = $('.awesome-slider .sli ...

Looking to improve query performance on MongoDB using mongoskin - should you use a single query or

this relates to mongodb {cod_com:'WWWOAN', cod_prod[{prod:'proda',info:'hello world'},{prod:'pacda',info:'hello world'},{prod:'prcdb',info:'hello world'}] } {cod_com:'WWWOA2&a ...

Using query parameters in Angular to interact with APIs

One scenario involves a child component passing form field data to a parent component after a button press. The challenge arises when needing to pass these fields as query parameters to an API endpoint API GET /valuation/, where approximately 20 optional p ...

Investigating the variety of HTTP 206 responses pertaining to video content

Currently, I am utilizing Amazon CloudFront to serve HTML5 videos. These videos are being requested through HTTP range requests and the expected responses are often in the form of HTTP 206 Partial Content. I have a requirement where I want to log the requ ...

Move to the top of the page when the next action is activated

I am working with an Angular 8 application. Within the application, I have implemented navigation buttons for next and previous actions. My goal is to ensure that when a user clicks on the "next" button, the subsequent page starts at the top of the page ...

Having trouble with Vue's $route.push method not working when invoked from a method?

I am currently in the process of creating a search bar for my application using the vue-bootstrap-typeahead autocomplete library. For those unfamiliar, when an option is selected from the suggestions list, it triggers the @hit event which passes the result ...

jQuery toggle function not working properly on first click

Why does my first click not work, but the second one does? This is the code snippet: $(function () { $("#clickme").toggle(function () { $(this).parent().animate({left:'0px'}, {queue: false, duration: 500}); }, function () { ...