AngularJS: Choosing items from a dropdown menu, not an object or array

Need help creating a select list from a simple list, not an array or object with keys. All the resources I've come across are focused on keyed data types.

$scope.numbers = ['tweedle', 'beetle', 'battle'];

With the following code, the select list displays correctly initially.

<select ng-model="fox" ng-options="item for item in fox"></select>

However, after selecting an item, it splits the value into a comma-separated list. Try selecting one item and then another.

I believe it's related to the binding, but I can't pinpoint the issue:

http://jsfiddle.net/LR6DL/1/

Answer №1

This occurs because you have assigned the ng-model of the select to fox. The options are also set to fox, leading to the overwriting of the options array with the selected value (as a string), which is then split into letters to satisfy the ng-options directive.

Quick fix:

Update your ng-model to selection and adjust your input selection as well.

See it in action here: http://jsfiddle.net/LR6DL/2/

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

Is the Jquery sortable feature malfunctioning on Android devices?

I am interested in incorporating the sortable function into my Android application, as shown in this link jquery UI). It works perfectly in a regular web browser, but for some reason, I am encountering issues when trying to implement it on Android phones ...

Observing the intricate structure and details of a complicated object hierarchy within Angular

I'm currently grappling with the challenge of identifying modifications to a complex nested, hierarchical object in an angular environment. Despite my initial hopes of utilizing a $watch or $watchCollection expression, I'm facing difficulties in ...

What are the steps involved in generating and implementing dynamic hierarchical JSON data structures?

I am currently creating a dynamic diagram using d3.js that incorporates hierarchical data. The goal is to make it interactive so that users can manipulate the hierarchy by adding or removing data values and children. I'm wondering if there is a way to ...

You cannot use the same condition more than once in ng-class

Looking at this code snippet... <div class="row"> <div class="col-md-5"> <span> Comments </span> </div> @*<div class="col-md-7">*@ <div class="col-md-7" ng-class="{'h ...

How to synchronize dnode and Express authentication?

Currently, I am in the process of developing a web application using Express and dnode. My main focus is on synchronizing authentication between the two platforms. I came across an example that seems relevant to what I'm working on, but for some reas ...

Access a JSON response within an HTML/JavaScript document

Can the scenario below be achieved? Here is the ajax response I received: HTML <body> <input type="text"></input> <div id="trydiv"></div> </body> JS $.ajax({ type: "POST", url: "json.php", ...

Revamp the Twitter button parameters or alter its settings

I'm working on a web page that includes a Twitter button. Before the button, there is an input field and a form where users can easily add relevant hashtags for the page. The goal is to take the text from the input field and populate it in the Twitter ...

Leverage the controller's properties and methods within the directive

My situation involves a variety of inputs, each with specific directives: <input mask-value="ssn" validate="checkSsn"/> <input mask-value="pin" validate="checkPin"/> These properties are managed in the controller: app.controller("Ctrl", [&ap ...

What is the minimum height of a scrollable div?

I have a div element and I am trying to determine the maximum scroll height of it. For example, my chat section currently displays 12 messages with a height of 800px. However, when I use the following code: var trueDivHeight = $('#chat')[0].scro ...

AngularJs: Extracting a string from compiled HTML or a variable

My goal is to retrieve a string from a template that I can later edit using Textangular or save in a database. This template comes from the server and is stored in the database. TemplateMailService.get($scope.type, function (data, status) { ...

Utilizing ngblur and ngfocus to toggle visibility of dropdown options in Angular

Whenever I click off the list without selecting anything, the ngblur event isn't triggered when using select and option. I'm searching for a directive that can help me determine when the options in the select are shown or hidden. Any suggestions ...

Using Javascript to Extract Data from a JSON Array

I am working with a straightforward Json array and need to retrieve the following: The total number of items in the array. The list of entries ordered by id. Below is an example of the array: {"error":false,"error_msg":"","body": {"records":[{"name":"A ...

What are the steps to generate an npm package along with definition files?

Is it possible to create an NPM package with definition files containing only interfaces declared in *.ts files? Consider a scenario where we have two interfaces and one class definition: export interface A { id: number; } export interface B { name: s ...

Unable to choose multiple options within a selection field

My webgui testing involves the use of selenium, which includes the following method: protected static selectListItems(String id, String value1, String value2, String value3,String value4){ String values = "" if(StringUtils.isNotBlank(value1)) ...

Combining multiple materials in Three.js using onBeforeCompile

Imagine having a scenario like this: //some chunks i want to override for functionality FOO const myNormalChunks = { beginnormal_vertex, defaultnormal_vertex, normalmap_pars_fragment, } //a version of `MeshStandardMaterial` that does FOO instea ...

A step-by-step guide to incorporating VeeValidate with vue-i18n

When a click event is triggered, I am able to change the language in vue-i18n. However, I am facing an issue with changing the vee-validate dictionary to match the same language. Main.js import VeeValidate from 'vee-validate' import validations ...

Transforming a string into JSON with proper sanitization

When web scraping, the website returns a string like this on get request: jQuery18305426675335038453_1429531451051({"d":[{"__metadata":"cool"}]}) The complete code snippet is provided below: var baseUrl = "http://SOMEURL.COM?spatialFilter=nearby(52.4795 ...

Reorganizing data with JSON using JavaScript

I have a JSON data that I am parsing with NodeJS and I need to restructure it into a different JSON format. The original JSON includes multiple "pages" objects within the "rows" object, each containing similar keys and values except for the "values" and "d ...

Shifting HTML table in Javascript by toggling checkboxes

When I click the checkbox, the table elements are not displaying inline. I am simply hiding the class "box". Do I need to write a special format? By default, the elements are displayed inline but when I check the checkbox, they shift. The column 'Stat ...

Preserve all the impact of a website indefinitely

Imagine a scenario where a webpage contains a button that, when pressed, creates another button below it. How can you save this effect so that when you reopen the webpage, the new button is still displayed below the original one? Is there a way to store ...