Error: ng-options and ng-init interaction is causing issues

Is it possible to display a different value than what is in the repeater if the selected value doesn't exist in the repeater in this scenario?

Fiddle

<input type="text" ng-model="somethingHere2"/>
Select:
<select ng-init="somethingHere2 = options.default" 
        ng-model="somethingHere2" 
        ng-options="items for items in options.values">
</select>

$scope.workItem = 100;
$scope.options = {
  default:$scope.workItem,
  values:[1,2,3,4,5]
};
$scope.serviceValues = Service; // Service = .factory('Service',...)

Answer №1

If you want to add a predefined <option> to a dropdown list using the <select> tag, you can set it as the default selected option. This is commonly done with a "Please select..." message and the value attribute must be an empty string:

<input type="text" ng-model="somethingHere2"/>
Select:
<select ng-init="somethingHere2 = options.default" 
        ng-model="somethingHere2" 
        ng-options="items for items in options.values">
    <option value="">Please select...</option>
</select>

By following this approach, you will be able to achieve your desired outcome. Keep in mind that ng-options only allows values from the supplied array, so any additional values cannot be selected.

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

Discovering the overall and individual totals within a list of items with the help of AngularJS

Can anyone assist with finding the total cart price when adding an order? Here is a snippet of my code where I am trying to calculate the subtotal for an ordered item. Any help on how to achieve this would be greatly appreciated. mainCtrl.controller("Or ...

What's more efficient in terms of performance, checking for a class versus adding a class?

When dealing with a function that triggers on a scroll event, which method is more efficient? Checking if a class is already added and adding it if not Simply adding the class without any checks each time $(document).on('scroll', function ( ...

Using PHP to output setTimeout() function to JavaScript

Currently, I have a PHP-based AJAX application that is responsible for loading videos onto a webpage. The challenge at hand involves setting up the application to load another video after a certain number of seconds retrieved from the database. My attempt ...

Orthographic Mode with EDL Shader in Potree Viewer

Struggling with the EDL Shader in the Potree Viewer? While it performs well in perspective mode, I'm encountering issues when trying to utilize orthographic mode for my project. Check out the accompanying GIF and example below for reference. The ED ...

Concealing a division element if there is no content inside of it

As a newcomer to jQuery, I am experimenting with setting up a code that hides a div when the 'innerHTML' is null. However, my attempt using the code below is not working. Can anyone point out where I might be going wrong? if (($("#php-errors").h ...

Experiencing a problem when attempting to activate the html5 mode feature in AngularJS to eliminate the #

I've been scouring through various sources like stackoverflow and the web, but I haven't found a clear answer to my question. Can someone please help me out? Here's what I'm struggling with: In my AngularJS application, I enabled &apos ...

Learning how to use arrow functions with the `subscribe` function in

Can someone help clarify the use of arrow functions in TypeScript with an example from Angular 2's Observable subscribe method? Here's my question: I have code that is functional: this.readdataservice.getPost().subscribe( posts =&g ...

Generating JSON objects within the Ionic SQLite framework

I am new to Ionic development and I'm looking for a way to convert a JSON string into a JSON object in Ionic, as well as how to access this JSON data on an HTML page. controller.js app.controller('OilTrackerListingCntrl', function($scope, ...

Mistakes encountered when utilizing the Gremlin DSL in the `repeat` stage

Our team is utilizing gremlin-javascript and has recently implemented a DSL (Domain Specific Language) to streamline our queries. However, we have encountered an issue when trying to use DSL methods within a repeat step. Every time we attempt this, we con ...

Leveraging the arguments object within function declarations

Could someone explain why the foo function functions properly? function foo (x,y) { return arguments.length; } However, when I call the boo function with arguments, it returns an error saying undefined is not a function. function boo (c,d) { return ...

JavaScript's Date() function accurately displays the timezone, but it inconsistently displays the

I have encountered an unusual behavior while attempting to retrieve the current date using Date() in JavaScript. Initially, I changed the timezone to Cuba with the command: sudo ln -sf /usr/share/zoneinfo/Cuba /etc/localtime Subsequently, I executed Date ...

Click on the image to select a radio button option

Query How can I display the appropriate dropdown when clicking on the image or checkbox, while hiding the radio button in the end? I suspect it may be a scoping problem as the options are not appearing correctly even when the radio button is checked. Vie ...

Guide to contrasting elements within a nested object

I am trying to extract data from an auto-generated object by cleaning up duplicates and concatenating any additional entries. Here is a simplified example: const categories = [{ category: "mammal", options: ["horse", "cow" ...

Swap two pairs of elements in an array in a random order

I have a list of team members and also 2 substitute players: team = Samson, Max, Rowan, Flynn, Jack subs = Struan, Harry I am facing a challenge in randomly swapping the 2 subs into the team. The difficulty lies in ensuring that only these 2 elements are ...

Converting a Google font for compatibility with ThreeJS: A beginner's guide

Is there a way to convert a downloaded Google font from TTF to JSON in order to use it with ThreeJS FontLoader / TextGeometry? import LatoFont from '../assets/fonts/lato-bold.json' const loader = new FontLoader(); const font = loader.parse(LatoF ...

Leveraging the power of ReactJS alongside Google Tag Manager

Looking for a way to track my application using Google Tag Manager, I stumbled upon a popular package at https://www.npmjs.com/package/react-google-tag-manager. However, despite following the instructions, I am having trouble configuring it properly! Foll ...

Determining if a div is scrolled to the bottom in ASP.NET

Seeking help as I am unsure how to tackle this task. My project involves using asp.net, where I have a div that has overflow:auto enabled to display terms and agreements. Additionally, there is an asp.net checkbox control with visibility set to "false". ...

What is the solution to the error message that states a bind message provides 4 parameters, while a prepared statement "" necessitates 5?

Is there a way to fix the issue where the bind message provides 4 parameters but the prepared statement "" requires 5? I've tried solutions from others who faced similar problems without success. (I've included all classes for better error unders ...

Trigger an event to retrieve data from an SQL Database using Google Maps API V3

I am working on configuring my Google map to allow users to click on a specific location on the map and retrieve information on that area using its latitude and longitude coordinates. The relevant data is stored in an SQL database. Can anyone provide guida ...

Using Javascript to Swap the Content of an Element

Recently, I've been delving into the world of javascript and have hit a roadblock. I understand how to instruct javascript to set a specific value for an ID, but now I have a new challenge: I want to create javascript code that can retrieve informati ...