Iterating over elements using ng-repeat, without displaying any content within ng-view

I am currently working with a controller:

function ItemsController($scope, $http){
    $scope.init = function(){
        $scope.siteItems = [
            {id:'1', path:'img/1.png'},
            {id:'2', path:'img/2.png'}
        ];
    }
};

and also have a view items.html:

<div class="row" ng-controller="ItemsController" ng-init="init()">
  <div class="col-xs-6 col-md-3" ng-repeat="item in siteItems">
    <a href="#/item/{{item.id}}" class="thumbnail">
      <img src="{{item.path}}">
    </a>
  </div>
</div>

Every time I load the view within the ng-view, the list is initialized and ng-repeat generates two elements. However, {{item.path}} and {{item.id}} appear empty. I attempted using ng-src, but encountered the same issue. Using ng-bind works, although it's not my preferred method. Moving the content from items.html to the main index.html resolves the problem. Any ideas on what mistake I might be making?

EDITED:

A functional plunker example. On my own device, I wrote it as follows:

with the following result:

Answer №1

It might be a little late to discover this, but I stumbled upon an issue while using Jekyll. Despite the source code appearing identical, it did not function as expected.

The issue lies in the fact that {{ }} is reserved for the Liquid template engine. In order to resolve this conflict, I came across a workaround to change the syntax.

var myApp = angular.module('myApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});

By implementing this adjustment, I can now utilize [[ ]] instead of {{ }}, resulting in successful execution.

Reference:

Answer №2

Have you experimented with approaching it in this manner:

function DisplayItems($scope, $http){
    $scope.items = [
        {id:'1', path:'img/1.png'},
        {id:'2', path:'img/2.png'}
    ];  
};

What about the html code without the initialization?

<div class="row" ng-controller="DisplayItems">
  <div class="col-xs-6 col-md-3" ng-repeat="item in items">
    <a href="#/item/{{item.id}}" class="thumbnail">
      <img src="{{item.path}}">
    </a>
  </div>
</div>

Answer №3

I decided to create a demonstration using mylescc's solution by making a plunker, and everything is functioning perfectly:

<div class="row" ng-controller="ItemsController">
  <div class="col-xs-6 col-md-3" ng-repeat="item in items">
    <a href="#/item/{{item.id}}" class="thumbnail">
      <img src="{{item.path}}">
    </a>
  </div>
</div>

Although the image does not exist at the specified path, the href link displays correctly. Furthermore, your code also performs effectively. Check out this plunker for validation. It appears that the issue lies in the initialization of angularjs.

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

Tips for loading a fresh webpage while transferring data from an api

I have a page that displays a list of teams. When a team is clicked, I want to show the title and members of that team on another page. Right now, I have successfully loaded the teams in the list using this code: angular.module('my-app').control ...

Updating the quantity of a Stripe subscription in Node.js: A Step-by-Step Guide

I'm having trouble modifying the quantity of items in an existing Stripe subscription. Whenever I attempt to update it, I encounter the following error: "error": { "message": "Invalid array", "param": &q ...

What is the implementation of ForEach within map in JavaScript?

I am working with a sample JSON in the following format: var sample=[{"id":200,"children":[{"value":300,"type":"SINGLE"},{"value":400,"type":"CLASSIC"},{"value":600,"type":"DUAL"}]},{"id":300,"children":[{"value":500,"type":"TRIO"},{"value":600,"t ...

When trying to use Javascript's `window.open()` function on Internet Explorer 11 to access an intranet website, the

Currently, I am troubleshooting an issue with Internet Explorer where it seems to be ignoring the parameters of the function window.open() when opening an intranet website. Strangely enough, this function works perfectly fine when opening a site in the int ...

Modify the background color of a particular TD element when clicking a button using JavaScript and AJAX

When I click on the "Active account" button inside the designated td with the <tr id="tr_color" >, I want the value "1" to be added to the 'active_account' column in the database. I have been successful with this functionality. However, I a ...

JavaScript issue: TypeError - Information.map is not a function. Learn how to properly use .map method

Currently, I am learning how to use CRUD in React with Express and Node. I have successfully inserted data into the database, but I encountered an error when trying to represent the data using .map. You can see the issue with <Input onClick="{getCR ...

Is there a way to prevent Chrome from highlighting text that matches the content of a `position: fixed` element?

I currently have a Toc element in my HTML with the property position: fixed. (This means it remains in place as you scroll) My goal is to prevent Chrome's Find Text feature from recognizing text within that Toc element. (Ideally using JavaScript) ...

Is there a way to return two separate functions within a single function that can be rendered as two distinct components in a React application without one function overriding the other?

I'm currently working on a react header that uses conditional rendering to show different elements based on the URL or user login status. However, I'm facing an issue where only one button is being rendered instead of two side by side in my defau ...

Dealing with Typescript (at-loader) compilation issues within a WebPack environment

Currently, I am using Visual Studio 2017 for writing an Angular SPA, but I rely on WebPack to run it. The current setup involves VS building the Typescript into JS, which is then utilized by WebPack to create the build artifact. However, I am looking to t ...

Sending customer information to URL endpoints in Express routes

I am a beginner in Node/Express, currently in the process of converting my jQuery/Bootstrap application to have a node backend for routing and other server-side tasks. Previously, when a user clicked on a link, data was passed into the URL which I then ret ...

Solution for repairing the display location button on Android within a React Native Map

I am facing an issue with the Location Button in my React Native Maps app. When the app is opened for the first time and the map is rendered, the button disappears. However, if I close the app but leave it running in the background, upon reopening the app, ...

Adjusting specific content based on the value selected in another dropdown menu

I am looking for a way to have a select element where the user can choose an option. Depending on the selected option, another select element should display some additional options. The second select element will retrieve its values from a database using ...

Ways to distinguish if Dynamics XRM javascript is being triggered from the unified interface (UCI) or the traditional web-client interface

Is there an official way to determine if code is being called from the UCI or the legacy web-client? I see the function Xrm.Internal.isUci(), but since it's labeled as Internal, it may not be recommended for use. However, I still need a method to diff ...

What kind of data does this collection hold, and what is the best method to retrieve its stored values?

I recently received a code to program a logic for and I have successfully figured out my algorithm. However, I am facing difficulty determining the datatype of a particular declaration. My task involves comparing the values of "skills" in each row to &apos ...

The Link Element Does Not Appear Properly When Styled Using nth-of-type Selector

https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js Can anyone help me understand why the fourth .content <Link/> is not displaying when using the given CSS styling? Could it be a bug in the code, or am I overlooking something important? ...

Ways to increase the size of an element within an array using JavaScript

I am currently working on expanding an array in JavaScript. Here is the object below const items = [ { id: 1, name: 'Alice', designs: [ { designId: 1, designName: "designA" ...

Tips for extracting the text either before or after a certain character within a string

Consider the following two strings: var str = "Extract Me @ Leave Me"; var str2 = "Not This @ Yes, This"; Imagine a function named extractString() that can work like this: extractString("frontOf", "@", str); // => Extract Me extractString("behi ...

Navigating Angular 2: Managing HTTP Updates Before Proceeding

My issue revolves around a service utilizing an http Post method saveItem(item: Item): Observable<number> { return this.http .post(`${this.baseUrl}/items`, item.createJson(), this.getHeaders()) .map(this.getIdFromItem) .catch(this.ha ...

Loading spinner in AngularJS for displaying during DOM rendering

I have a page with 8 tabs, each containing a lot of HTML controllers (data bindings), resulting in slow data rendering. To address this issue, I implemented an ng-if condition based on the active tab determined by ng-click. The active tab is visually indi ...

Fix for fixed scrolling in the navigation bar

Having a website that receives traffic from different countries, including Portugal and other non-English speaking places, I decided to add a translation option. However, I encountered an issue with Google's translate feature which displays a banner a ...