Unable to display items in controller with AngularJS

I am facing an issue with displaying a slider using ng-repeat in my AngularJS code. The pictures and other elements defined in the controller are not showing up on the page. Here is the JavaScript code snippet: 

angular.module('starter', [])
.controller('slider', function($scope) {
    $(document).ready(function(){
      $('.slider').slider({full_width: true});
    });
     $scope.pictures=[
  {
    img:"http://www.brics-info.org/wp-content/uploads/2015/08/Transmission-Lines.jpg",
    info:"Electrical Transmission Line Installation",
    desc:"Maintenance and Testing"
  },
  {
    img:"http://www.burns-group.com/images/uploads/projects/Amtrak-Zoo-Transmission-Line-3.jpg",
    info:"Electrical Transmission Line Installation",
    desc:"Maintenance and Testing"
  },
  {
    img:"http://www.sgceng.com/snp_lib/showpic.php?recordID=630&timestamp=1204139644&table=sgcengco",
    info:"Electrical Transmission Line Installation",
    desc:"Maintenance and Testing"
  }
  ] ;
})
This is index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
          
<div class="slider" ng-app="starter" ng-controller="slider">
    <ul class="slides">
      <li ng-repeat="picture in pictures">
        <img ng-src="{{picture.img}}"> <!-- image -->
        <div class="caption center-align">
          <h3 class="black-text">{{picture.info}}</h3>
          <h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
        </div>
      </li>
    </ul>
  </div><!--slider-->
Any idea why the images and content are not appearing as expected?

javascriptangularjsapi

Answer №1

To implement your controller in the index.html file, make sure to add the following code: use ng-app="moduleName" and ng-controller="yourController". Include the script.js file for your controller implementation.

<!DOCTYPE html>
<html data-ng-app='starter'> /* Use your module name as the ng-app attribute value */

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40212e27352c21326e2a3300716e746e78">[email protected]</a>" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script> /* Load your controller file */
  </head>

  <body ng-controller="slider"> /* Use your controller here */
    <h1>Hello Plunker!</h1>
    <div class="slider">
    <ul class="slides">{{pictures}}
      <li ng-repeat="picture in pictures">
        <img ng-src="{{picture.img}}"> <!-- Image -->
        <div class="caption center-align">
          <h3 class="black-text">{{picture.info}}</h3>
          <h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
        </div>
      </li>
    </ul>
  </div>
  </body>

</html>

Check out this PLUNKER Demo Link for reference

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

Execute functions in a random order

My array contains a series of functions and is structured as shown below: var all_questions = [ show_question(1, 1), show_question(2, 1), show_question(3, 1), ]; I'm interested in executing those functions within the array in a random or ...

javascriptjqueryarrays

Unable to add a string to a http get request in Angular

When a specific ID is typed into the input field, it will be saved as searchText: <form class="input-group" ng-submit="getMainData()"> <input type="text" class="form-control" ng-model="searchText" placeholder=" Type KvK-nummer and Press Enter" ...

javascriptangularjshttpparametersroutes

Utilizing Node, ObjectionJS, and Knex, we can establish a one-to-many relationship and retrieve the first associated row from the many

To simplify, I use two tables for a chatbox: Conversation and Message Conversations ID Status 1 open 2 open Messages Conversation ID Text Date 1 'ffff' (random date) 1 'asdf' (random date) 1 '3123123123&ap ...

javascriptmysqlnode.jsknex.jsobjection.js

Mastering the Art of Displaying Links in Columns within a Table Using ReactJS

I have the following code that fetches data from the backend and displays it in a table. Everything is working correctly. Now, I need to make the first column in the table appear as a link. How can I achieve that? const EditController = () => { c ...

javascriptreactjsnode.jsexpress

Encountering a Javascript error while trying to optimize bundling operations

After bundling my JavaScript with the .net setting BundleTable.EnableOptimizations = true;, I've encountered a peculiar issue. Here's the snippet of the generated code causing the error (simplified): var somVar = new b({ searchUrl: "/so ...

javascriptc#typescriptbundling-and-minification

Angular Object Error: Unhandled Exception

As someone who is new to Angular, I am still trying to grasp how it functions. However, I have encountered an issue early on that is causing the below code to produce an "Uncaught Object" error in the console and disrupt Angular functionality. It seems t ...

javascriptangularjs

What could be the reason for the electron defaultPath failing to open the specified directory?

Hi, I'm experiencing difficulties opening the directory path (/home/userxyz/Releases/alpha) using electron. This is what I have attempted: I have a similar path on Ubuntu: /home/userxyz/Releases/alpha When trying to access this path with the fo ...

javascriptnode.jselectron

In JavaScript, if you check for the existence of a key in an object, it

Recently, I ran into an issue with an undefined error when trying to access a value in a JavaScript object key. I retrieved arrays of objects using the mongoose.find().exec() callback and then checked each object for a specific key. Here is an example obj ...

javascript

Adjust the object's width and position based on the window's width

I am currently attempting to adjust the width of a box and the position of a btn based on the size of the window. Q1. How can I eliminate the excess white space located behind the scroll bar? (I have already set it to 100%..) Q2. After clicking the ...

javascriptjquery

Angular Promises - Going from the triumph to the disappointment callback?

It seems like I might be pushing the boundaries of what Promises were intended for, but nonetheless, here is what I am attempting to do: $http.get('/api/endpoint/PlanA.json').then( function success( response ) { if ( response.data.is ...

javascriptangularjsangular-promise

Required inputs do not disrupt the form's action flow

Here is the HTML code that I am working with: function document_save_changes(){ if (is_key_dirty == true){ var elm = document.getElementById('set_doc_button'); key_change_warning(elm, 'D'); return; } if (document_save_warning('A ...

javascripthtmlforms

What could be causing my Express API registration route to fail when attempting to POST?

Currently, I'm in the process of developing a compact authentication system for a practice project that I've undertaken. As part of this endeavor, I am sending POST requests via Postman to my Express server located at http://localhost:4000/api/re ...

javascriptnode.jsexpress

Deleting a database entry with Angular

I am struggling to figure out how to delete a database record in Angular using my MVC controller. I've created a method for this purpose but I'm unsure of how to properly call it and pass the required id. [HttpPost] public static vo ...

angularjs

Verify if the form has been successfully validated

Here is a simple form using Tag Helper: <form asp-area="Admin" asp-controller="Categories" asp-action="EditCategory" method="post" id="CategoryForm"> <div class="row"> ...

javascriptjqueryvalidation

I'm noticing that my CSS is behaving differently than expected. Despite setting position: absolute, the output is displaying as inline-block instead of block. Why is this happening

div { width:200px; height:200px; position: absolute; } .first-container { background-color: #9AD0EC; } .second-container { background-color: red; left: 200px; } .third-container { background-color: blue; left:400px; } Despite setting th ...

javascripthtmlcssweb

Difficulty encountered when assigning object properties as callback results in node-tesseract package

I'm attempting to utilize the outcomes of a callback function as properties of an object. Here is an example of how I am implementing the module I am constructing: var Capture = require("./Capture.js") const example = async function() { let scr ...

javascriptnode.jsobjectcallbacktesseract

Reset checkboxes in Material UI data grid

Currently, I am immersed in a React Js project that involves various tabs, each containing a unique data grid table with rows featuring checkboxes. Issue: Whenever I select a row from Table 1 and navigate to Tab 2 before returning to Tab 1, the checkboxes ...

javascriptreactjsdatagridmaterial-ui

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Is there a way to call a function with specific parameters when the value of a select element changes in Angular? <div class="col-sm-6 col-md-4"> <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label> <div cla ...

javascriptangulartypescript

Problem with FB.logout, FB.getLoginStatus() is yielding an unrecognized status

I've been struggling to implement the functionality of FB.logout() in my project. Every time I try, I encounter the error message: 'FB.logout() called without an access token.' After researching solutions online, I discovered that I need to ...

angularjsfacebookfacebook-javascript-sdk

JQuery may be successfully loaded, but it is not functioning as intended

Just started dabbling in JQuery (I'm a newbie) but I'm having trouble getting it to work! Initially, it worked a couple of times but then suddenly stopped working (pretty strange). I made some changes and now it doesn't work at all. JQuery a ...

javascriptjqueryhtmlcss