Trouble displaying options in Angular JS ng-repeat

I'm currently facing an issue with populating data from a database onto a web page. Despite my efforts, I haven't been able to get it to work as intended:

<div ng-controller="AnalyzerController">
   <select id="Listbox" ng-model="Listofoptions" style="width: 500px">
      <option ng-repeat="option in options" value="{{option}}"> {{option}} </option>
   </select>
   </td>
</div>

Below is the JavaScript code for the controller:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"
   type="text/javascript"></script>
<script>
   var analyzer=angular.module('analyzer',[]);
   analyzer.controller('AnalyzerController',function($scope )
   {
    $scope.options = ["A","B","C","D","E"];

   }

</script>

The issue I'm experiencing is that the select box is displaying {{options}} instead of the actual values.

Answer №1

Your controller function is missing a closing parenthesis, which is why the value is not displaying.

It is recommended to use ng-options along with ng-model. You can refer to Choosing between ngRepeat and ngOptions to understand the advantages.

var analyzer=angular.module('analyzer',[]);
        
analyzer.controller('AnalyzerController', function($scope)
{
$scope.options = ["A","B","C","D","E"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="analyzer">
  <div ng-controller="AnalyzerController">
      <select id="Listbox" ng-model="Listofoptions" style="width: 500px">                  
        <option ng-repeat="option in options" value="{{option}}"> {{option}} </option>
      </select>
  </div>
</div>

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

Leveraging JavaScript code repeatedly

Apologies if this question has been asked before, as I couldn't find it. I have an HTML table with images used as buttons: <td> <button class="trigger"> <img src="D:\Elly Research\ CO2858\Presentation\Calypso ...

Having trouble with errors when adding onClick prop conditionally in React and TypeScript

I need to dynamically add an onClick function to my TypeScript React component conditionally: <div onClick={(!disabled && onClick) ?? undefined}>{children}</div> However, I encounter the following error message: Type 'false | (() ...

Is it feasible to directly load image objects into jQuery colorbox?

Currently, I am working with the "colorbox" jQuery plugin and I have a specific requirement to dynamically load a set of preloaded image objects into colorbox. The challenge lies in the fact that I have three different image sizes - thumbnail, display, an ...

Switching PHP include on an HTML page using JavaScript

I've been attempting to modify the content of the div with the ID "panel_alumno" using a JavaScript function that triggers when a button is clicked. My goal is to display a different table each time the button is pressed, but so far, I haven't be ...

Instructions for separating a string into smaller parts, further splitting one of the resulting parts along with another associated value, and then combining the leftover segments with the remaining parts

My goal is to work with a string that is between 2000 and 3000 characters long, containing over a hundred non-uniformly placed \n characters. I want to divide this string into segments of 1000 characters each. In the resulting array of strings, I want ...

ajax receives an empty responseText after sending intermediate data to Python on the backend

Initially, the frontend passed an identification to the backend. The backend utilized this identification to retrieve data from the database. The extracted data then underwent additional processing on the backend before being sent back to the frontend. Be ...

Error: The function req.logIn is not valid

I'm currently in the process of creating a dashboard for my Discord bot, but I've encountered an error that reads as follows: TypeError: req.logIn is not a function at Strategy.strategy.success (C:\Users\joasb\Desktop\Bot& ...

What measures can be taken to avoid the entire page from reloading?

Within my page, there exist two containers. The first container is designated for displaying a list of items, while the second container showcases actions corresponding to each item. A feature allows me to add a new item dynamically to the first container ...

Unexpected error: the process is not recognized

I am currently working with node.js to develop a web application. Upon running the application (either by opening index.html in the browser or executing "npm start" in the terminal), I encounter two errors: Uncaught ReferenceError: process is not defined ...

What causes the Vue.http configuration for vue-resource to be disregarded?

I am currently utilizing Vue.js 2.3.3, Vue Resource 1.3.3, and Vue Router 2.5.3 in my project while trying to configure Vue-Auth. Unfortunately, I keep encountering a console error message that reads auth.js?b7de:487 Error (@websanova/vue-auth): vue-resour ...

Is there a way to create a sequence where text fades in only after the previous text has completely faded out?

Currently, I am using JQuery to create a continuous slideshow of text values. However, after some time, multiple texts start to display simultaneously, indicating a timing issue. Even when hidden, the problem persists. My code includes 3 strings of text. ...

Iterating through a jQuery function to increment value

I have encountered an issue while trying to calculate the total value from an array of form fields. The problem lies in how the final value is being calculated on Keyup; it seems that only the last inputted value is being added instead of considering all t ...

Tips for accessing arrayList data within a loop in JavaScript and displaying it in an HTML <c: forEach> tag

I have an array list stored inside a javascript code block. I am looking to extract this array list and iterate through it using the html tag <c:forEach>. How can I achieve this? Currently, I am able to display the array list using <h:outputText&g ...

Sharing data between components using $state.params and $stateParams

I have gone through several articles but none of them seem to be effective: I am trying to send some information using $state.go. This is the state configuration: .state('app.404', { url: '404', views: { 'header@&ap ...

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

I am currently utilizing the most recent Twitter Bootstrap along with Flat UI. I have been trying to create a basic navbar that collapses when the screen size is reduced. How can I resolve this issue? This is how it currently appears: My navigation items ...

What is the process of transforming async/await code into synchronous code in JavaScript?

Blocking the event loop is generally considered bad practice due to its consequences. However, even the native fs module includes some synchronous functions for specific purposes, such as CLIs using fs.readFileSync. I am interested in converting the follo ...

Clicking on the button in Angular 2+ component 1 will open and display component 2

I've been developing a Angular 4 application with a unique layout consisting of a left panel and a right panel. In addition to these panels, there are 2 other components within the application. The left panel component is equipped with buttons while ...

Listen for changes in the input field, even if the value is a string, with

I am working on my Angular application and here is the code snippet I have: <input ng-name='{{quest.id}}' type="number" class="form-control textInputBox inputMargin" ng-required='required' ng-model='$parent.input' > A ...

The properties of a JSON object are not explicitly defined

When I make an AJAX call, I receive a JSON object and log it using this code: console.log(response); This is the response that gets logged in the console: {"filename":"new.jpg","orientation":"vertical"} However, when I try to access the orientation pro ...

Project in Three.js where the camera remains focused on the object while in a top-down perspective

I am currently working on developing a top-down game using Three.js, inspired by classic arcade games like Frogger. I am facing challenges in ensuring that the camera stays centered on the main character as it moves across the screen. I am currently util ...