Troubleshooting: AngularJS ng-options failing to populate the list of objects

Having trouble populating a combo box in AngularJS. Here is the controller code snippet:

var app = angular.module('app');

app.controller('roadmap', function($rootScope, $scope, $http, $q, leFactory) {
    $rootScope.activityInfoList=[];

    $rootScope.brand_strategy_list=[];
    $rootScope.brand_strategy_csf=[];
    $rootScope.brand_strategy_initiatives=[];

    leFactory.getActivityPopupInfo().then(function(activityList) {
        $rootScope.activityInfoList=angular.copy(activityList);
        console.log($rootScope.activityInfoList);

        $rootScope.brand_strategy_list=$rootScope.activityInfoList.listBrandStrategy;

        console.log($rootScope.brand_strategy_list);

        console.log('editActivityPopup service accepted-> ');
    }, function(error) {
        console.log('editActivityPopup service rejected-> ', error);
    });

    $rootScope.items = [{
      id: 1,
      label: 'aLabel',
      subItem: { name: 'aSubItem' }
    }, {
      id: 2,
      label: 'bLabel',
      subItem: { name: 'bSubItem' }
    }];



});

In my HTML file, I am trying to populate the $rootScope.brand_strategy_list as shown below.

    <select ng-model="activityInfoList.brandStrategy" class="selectpicker" data-style="btn-inverse" style="display: none;"  ng-options="item.strategyName as item.strategyName for item in brand_strategy_list">
        <option> Select </option>
     </select>

The $rootScope.brand_strategy_list is not getting populated. However, when I tried populating $rootScope.items, it worked fine. Upon checking with console.log($rootScope.brand_strategy_list), I can see the complete list logged.

Can't figure out where I might be going wrong. Any help in solving this issue would be greatly appreciated. Thanks in Advance.

Answer №1

Give this a shot

ng-options="strategy.label as strategy.name for strategy in $scope.brand_strategies

Answer №2

Make sure to eliminate the style attribute with value "display: none;" from the html code, and update $rootScope to $scope

<select ng-model="activityInfoList.brandStrategy" class="selectpicker" data-style="btn-inverse"   ng-options="item.strategyName as item.strategyName for item in brand_strategy_list">
        <option> Select </option>
     </select>

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

Meteor throws a "ReferenceError: module is not defined" error message following the installation of a package

I have created a meteor package that includes the ZiggeoSDK API to seamlessly integrate Ziggeo into my meteor app. However, upon installing this package, I encountered the following error: ReferenceError: module is not defined The Ziggeo Node Server SD ...

Error: JSON parsing stopped due to unexpected end of file while attempting to parse data

After testing with other APIs successfully, I found that this particular one is not functioning as expected. const express = require("express"); const https = require("https"); const bodyParser = require("body-parser"); const ...

Display the menu and submenus by making a request with $.get()

My menu with submenu is generated in JSON format, but I am facing issues displaying it on an HTML page using the provided code. Can someone please assist me in identifying what mistakes I might be making? let HandleClass = function() { ...

Deleting an element from an array renders the iterator invalid

Looking for a solution in AngularJS to eliminate all categories with a count of 0 from the categories array. // removing categories with zero count i = 0; angular.forEach( $scope.categories, function( category ) { if( category.count == 0) ...

Attempted to utilize zipstatic but received no feedback

I attempted to utilize the Zipstatic API with jQuery in my code, as shown below. However, I am not receiving any response. Could there be something missing? jQuery(function() { jQuery("#form").hide(); jQuery("#postcode").keyup(function() { var c ...

Encountered an error in React JS and Axios when attempting to select a form: "Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'."

I'm encountering an issue while attempting to send FormData using Axios within a React JS application. The form should include both text inputs and multiple file uploads. However, when I tried to select the form with querySelector, it doesn't app ...

Ensure the Image URL is valid before modifying the State in React/Next

This code snippet is written in React/Next.js with styled-components. Hey there, I have a component that displays a blog banner using a background-image. The URL for the image comes from a state variable that currently holds a default image path. const [b ...

The component's state consistently reverts to its initial state

I am working with a component called DataGrid that has the following state: const [rows, setRows] = useState([ { id: 1, lastName: 'Snow', firstName: 'Jon', status: 'Sold'}, { id: 2, lastName: 'Lanniste ...

What causes the indexOf method to return -1 even when the values are present in the array?

Could someone explain why the indexOf() method returns -1 even though the values are present in the array? The includes() function also returns false for me. I feel like I must be missing something or forgetting a crucial detail. Any insights on why the ...

Best approach for retrieving and adding a large number of images when dealing with slower connections

Currently, I am retrieving 100-200 images using a combination of ajax-php-mongodb. The process involves ajax making an initial call with parameters, php on the server side locating the appropriate mongo document containing all image file ids in grid fs, fe ...

implement django self,pk post-save success function

It might seem unconventional, but I'm attempting to utilize a primary key (pk) in a success function to generate a href for loading. The pk will be new and generated by the save() method. What I would like to know is how to send the self.pk pack to t ...

Encountering Issues with NextJS Dynamic SSR: Mobile Devices stuck on loading screen

Issue: The dynamic import feature of Next JS is encountering loading issues specifically on mobile browsers such as Google Chrome and Safari on IOS. Strangely, the functionality works smoothly on desktop browsers like Google Chrome and Mozilla. The projec ...

Utilizing Redux state within _app.tsx in NextJS: A comprehensive guide

This snippet of code pertains to my _app.tsx file import '../styles/globals.css' import AppNav from '../components/AppNav' import type { AppProps } from 'next/app' import { store } from '../store' import { Provider } ...

What methods with JavaScript, Ajax, or jQuery can I apply to populate the student details?

For completing the StudentID section, please fill out the form data.cfm with the first name, last name, and Middle Name. <script language="Javascript"> $(function() { $( '#effective_date' ).datepicker(); jQuery.validator.addMetho ...

Is there a way to retrieve a nested object from a JSON string that may be considered invalid?

I received this data from an API response {\r\n \"VAL_VER_ZERO_TURN\" : {\r\n \"J_ID\" : \"345\",\r\n \"DIS_CODE\" : \"WV345\"\r\n }\r\n} After us ...

Automatically scroll the chat box to the bottom

I came across a solution on Stackoverflow, but unfortunately, I am having trouble getting it to work properly. ... <div class="panel-body"> <ul id="mtchat" class="chat"> </ul> </div> ... The issue lies in the JavaScript t ...

What is the process for importing Java libraries automatically in Sublime Text 3?

Is there a specific term for the items you insert at the beginning of code, like "import javax.swing.JFrame;"? I was looking for a way to automatically add these imports to my code and found the JavaImports package here: I navigated to the settings in Sub ...

Error: The hook call is invalid and can only be made within the body of a function component in ReactJS

Hello everyone, I am currently facing an issue with saving the lat and lng variables in the state within a hook. When trying to do so, I encounter the following error message: "Error: Invalid hook call. Hooks can only be called inside the body of a functio ...

Converting an Array into JSON Format Using Java

I need to tackle the task of converting an ArrayList containing users from Java to JSON format. While I have successfully figured out how to convert a single user, I am struggling with the syntax required for handling arrays. The following code snippet is ...

Prevent caching in browser for JavaScript GET requests

My service includes a feature that adds Cache header to responses in order to allow browser caching. However, there are certain JavaScript requests where I need to ensure the data is force reloaded, bypassing the browser cache. Is there a way to accompli ...