One controller displays ng-repeats while the other does not

I have 2 controllers loading in different locations within my view. One controller works perfectly, but the other one does not show ng-repeats or appear in ng-inspector. I have confirmed that the http data is visible in the inspector.

Both controllers are using the WordPress REST-API.

Below is the main code:

var homeApp = angular.module('homeCharacters', ['ngSanitize']);

homeApp.controller('mainMenu', function($scope, $http) {
  $http.get("http://localhost:3000/wp-json/menus/2").then(function(response) {
    $scope.menuData.data = response.data;
  });
});

homeApp.controller('characters', function($scope, $http) {
  $scope.myData = {
    tab: 0
  }; //set default tab
  $http.get("http://localhost:3000/wp-json/posts?type=character").then(function(response) {
    $scope.myData.data = response.data;
  });
});
homeApp.filter('stripTags', function() {
  return function(text) {
    return text ? String(text).replace(/<[^>]+>/gm, '') : '';
  };
});
mainMenu Controller (not working):

<nav ng-controller="mainMenu as menuData">
  <ul>
    <li ng-repeat="x in menuData.data"><a href="javascript:void(0)">{{ x.items.title }}</a>
    </li>
  </ul>
</nav>
<!--end header nav-->


characters controller (working):

<section class="characters" ng-controller="characters as myData">
  <div class="char_copy">
    <h3>Meet the Characters</h3>
    <div class="char_inject" ng-repeat="item in myData.data" ng-show="myData.tab === item.menu_order">
      <div class="copy_wrap">
        <h3>{{ item.acf.team }}:</h3>
        <h2>{{ item.acf.characters_name }} <span>[{{item.acf.real_name}}]</span></h2>
        <p class="hero_type">{{ item.acf.hero_type }}</p>
        <div class="description" ng-repeat="field in item.acf.character_description">
          <p>{{field.description_paragraph}}</p>
        </div>
        <a class="learn_more" href="{{ item.acf.character_page_link }}">Learn More <img src="./app/themes/big-blue/dist/images/big-white-arrow.png" /></a>
      </div>
      <div class="image_wrap">
        <img src="{{ item.acf.homepage_full_image.url }}" />
      </div>
    </div>
  </div>
  <div class="char_tabs">
    <nav>
      <ul ng-init="ch.tab = 0">
        <li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}">
          <a href ng-click="myData.tab = item.menu_order">
            <img src="{{ item.featured_image.source }}" />
            <div class="tab_title_wrap">
              <div class="h3_background">
                <h3>{{ item.acf.characters_name }}</h3>
              </div>
              <p>{{ item.acf.team }}</p>
            </div>
          </a>
        </li>
      </ul>
    </nav>
    <a class="more_characters" href="#">More Characters <img src="./app/themes/big-blue/dist/images/big-white-arrow.png" /></a>
  </div>
</section>

If needed, here is the JSON for the non-working controller:

{
  ID: 2,
  name: "main",
  slug: "main",
  description: "",
  count: 6,
  items: [{
    ID: 43,
    order: 1,
    parent: 0,
    title: "The Resistants",
    url: "http://bigbluecomics.dev/the-resistants/",
    attr: "",
    target: "",
    classes: "",
    xfn: "",
    description: "",
...
}

Thank you for all the assistance, as I am still learning Angular!

Answer №1

Your li element that contains the repeater is not bound correctly.

It's advisable to avoid using ng-init and instead, move that logic into your controller for better organization.


<nav ng-controller="mainMenu as menuData">
  <ul>
    <li ng-repeat="x in myMenu.data"><a href="javascript:void(0)">{{ x.items.title }}</a>
    </li>
  </ul>
</nav>

The correct version should be:


<nav ng-controller="mainMenu as menuData">
  <ul>
    <li ng-repeat="x in menuData.data"><a href="javascript:void(0)">{{ x.items.title }}</a>
    </li>
  </ul>
</nav>

Answer №2

I was able to figure it out with the help of @Pytth's suggestion

homeApp.controller('mainMenu', function($scope, $http) {
  $http.get("http://localhost:3000/wp-json/menus/2").then(function(response) {
    $scope.menuData.data = response.data.items;
  });
});
<nav ng-controller="mainMenu as menuData">
  <ul>
    <li ng-repeat="x in menuData.data"><a href="javascript:void(0)">{{ x.title }}</a>
    </li>
  </ul>
</nav>
<!--end header nav-->

Thank you for your help! It's always nice to have another perspective!

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

Issue with loading templates in multi-level nested states

I have organized my states in the following manner. The first state is abstract, and all second-level states (list, edit, and new) load perfectly. However, my third-level state (passengers) is not loading; it remains stuck on the edit state UI. What could ...

What is the variance in performance between the sx prop and the makeStyles function in Material UI?

I recently started delving into Material UI and learned that it employs a CSS in JS approach to style its components. I came across 2 methods in the documentation for creating styles: First, using the sx prop: <Box sx={{ backgroundColor: 'green& ...

Can one showcase a php content using an ajax event?

I’m having trouble asking the right question because I’m not sure what I’m doing. I have a form that includes a default PHP script that creates three different lines: <form method="GET" name="NewDeliveryNote" action="ItemPosts_INSERT.php"> < ...

What is the best way to eliminate an object from an array using JavaScript?

I am currently working with two arrays named totalArray and selectionArray. These arrays have dynamic values, but for the sake of example I have provided sample arrays below. My goal is to remove objects from totalArray based on their id rather than inde ...

React-spring is causing an increase in the number of hooks rendered compared to the previous render in React

I've encountered a similar issue as discussed on SO, but I'm struggling to resolve the problem detailed below. The scenario This code snippet found at the following link is functional: https://codesandbox.io/s/frosty-water-118xp?file=/src/App. ...

What sets apart ruby's HTTParty from angular's $http?

Using HTTParty to Post Request $http did not pass the http method properly. However, HTTParty functioned correctly and retrieved the desired results.</p> ...

Deactivate collapsing of active element in Bootstrap 5 accordion without using jQuery

Check out this example of a Bootstrap 5 Accordion element: <div id="accordion-1" class="accordion" role="tablist"> <div class="accordion-item"> <h2 class="accordion-header" role=& ...

Tips on transforming a grouped object into a table organized by column with the help of Lodash

Looking at my array data: [{ id: '1234', year: 2019 , name: 'Test 1- 2019', rate: 1}, { id: '1234', year: 2020, name: 'Test 2 - 2020', rate: 2 }, { id: '1234', year: 2020, name: 'Test 3 - 2020&apos ...

Inconsistencies in Height Among JQuery Elements

I am encountering an issue with my datatable.js, where I am attempting to limit its height based on a specific row number, such as 4.5 rows. However, I am facing a problem with the row height (tr height). For example, when using the following method with m ...

Creating a custom directive with a constantly changing value in AngularJS

I've created a small directive that triggers a 'keydown' event when an element is clicked. It's working well, but I want to make it more versatile by allowing the 'keydown' value to be passed directly from the view. Could som ...

Tips for displaying NoOptionsText in MaterialUI Autocomplete based on a specific condition

When using a Material UI autocomplete feature, the items are selected based on the first 3 letters typed. For example, if you're searching for all "Pedros" in your database, typing "Ped" will bring up results starting with those letters. The issue ar ...

Tips for organizing the output of wp_query

I'm looking to organize the results of my wp_query, wanting to arrange them by different parameters without needing to run the query again. Here is what I have so far: $the_query = new WP_Query( $args ); I’d like to sort $the_query; WP_Query gives ...

How can you prevent videos from constantly reloading when the same source is used in multiple components or pages?

How can we enhance loading performance in Javascript, React, or Next JS when utilizing the same video resource across various components on different pages of the website to prevent unnecessary reloading? Is there a method to store loaded videos in memor ...

Testing a close function in a modal using Karma-jasmine

Testing is new to me and I'm looking to test the close function and see if it renders properly in Angular. Here's the HTML structure: <div class="modal active" *ngIf="active" id="modal"> <div class=" ...

The issue with the transition element not functioning properly in the hamburger menu is being encountered while using Tailwind CSS alongside

I am currently working on creating a responsive navigation bar in nuxt3/vue. <template> <nav class="flex justify-between items-center w-[92%] mx-auto gap-4 border border-2 border-black p-2" > <div> <span cla ...

The Mystery of Two Nearly Identical Functions: One function is queued using Queue.Jquery, but the effects fail to work on this particular function. What could be causing this

In short, I am currently working on my first portfolio where I am utilizing Jquery to manipulate text. My goal is to have the text fade in and out sequentially. However, when using the queue function to load another function, the text within the span tag ...

JavaScript must be able to detect when the checkbox value is reversed, which is dependent on the user-entered data

Hey there, I come across a situation where users are selecting a checkbox to insert or update a row of data in a MySQL database through SparkJava/ Java. The functionality is working fine except for a minor glitch. The issue arises when the checkbox behav ...

Displaying success and failure messages on a modal window using Ajax in PHP form

Unable to display error messages or success messages in the same modal window. I have set up Wordpress and using the following code: Form <form id="formcotizador" method="post" action="<?php echo get_template_directory_uri(); ?>/cotizador/procc ...

Error message: A state has not been defined within the onload function

I'm facing an issue where I am attempting to assign a data URL of an image to a state in Vue.js, but it is not getting assigned properly. After converting a blob URL to a data URL, the state does not contain the correct data URL. While the imgSrc doe ...

Toggle visibility of table row upon user click (HTML/JQuery)

Having an issue with showing or hiding table rows using jQuery. I would like it so that when a user clicks on a table row with id="jobtitle", the corresponding tr with class="texter" will either show up or hide if it is already displayed. This is my curre ...