AngularJS blank drop-down selection

I am currently working on an AngularJS select element with ng-options using the code below:

 <select ng-model="vm.selectedship" ng-change="vm.updateShip()"  data-ng-options="ship as ('ship' + ' is ready (' + ship.currentlocation + ')') for ship in vm.readyships">

This code generates the following output:

    <select class="ng-valid ng-dirty ng-touched" data-ng-options="ship as ('ship' + ' is ready (' + ship.currentlocation + ')') for ship in vm.readyships">
<option label="" selected="selected" value="?">
        </option>
    <option label="ship is ready (New york)" value="0">
        ship is ready (New york)
    </option>
    <option label="ship is ready (City2)" value="1">
        ship is ready (City2)
    </option>
    <option label="ship is ready (City3)" value="2">
        ship is ready (City3)
    </option>
    <option label="ship is ready (City24)" value="3">
        ship is ready (City24)
    </option>
    <option label="ship is ready (City24)" value="4">
        ship is ready (City24)
    </option>
</select>

However, after selecting an option, the text within the selector remains blank like this

https://i.sstatic.net/hMxEY.png

Q: How can I make sure the selected text appears within the selector? Also, how do I remove the blank option?

EDIT:

Currently, I am utilizing vm.selectedship to retrieve the entire property of the selected ship. If any adjustments are required here, I need to somehow select the ship to a vm.property differently.

javascriptangularjsng-optionsangularjs-ng-options

Answer №1

If you are encountering a situation where the selection appears blank, it may be due to using a string instead of a property for alias. This can cause ng-model to have difficulty locating the property for display. To resolve this issue, consider creating a property named DisplayText for each object in the controller rather than generating the string dynamically.

HTML

<select ng-model="vm.selectedship" ng-change="vm.updateShip()"  
data-ng-options="ship as ship.DisplayText 
for ship in vm.readyships">

JavaScript

 _.each(vm.readyships, function (ship) { 
_.extend(ship, { DisplayText: "ship is ready (" + ship.currentlocation + ")" });
});

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 there a way to retrieve the ID from a span and convert it into a string format?

let wordSpan = '<span class="we w_o_r_d_s" id="we" contenteditable="false">we</span>' console.log(wordSpan.id); console.log(wordSpan.attr('id')); console.log(wordSpan.getAttribute('id')); let newDiv = document.c ...

javascriptjqueryhtml

Unpacking the information in React

My goal is to destructure coinsData so I can access the id globally and iterate through the data elsewhere. However, I am facing an issue with TypeScript on exporting CoinProvider: Type '({ children }: { children?: ReactNode; }) => void' is no ...

javascriptreactjstypescript

What is the best way to fetch the data from this API?

function fetchCoinPrice(coinName) { return axios .get( `https://min-api.cryptocompare.com/data/pricemulti?fsyms=${coinName}&tsyms=EUR` ).then((response) => (response.data[coinName]["EUR"])); The JSON response for the coin "BTC" is: ...

javascriptangulartypescriptobservablesubscriber

HTML comment without the presence of javascript

Is it possible to use different expressions besides checking for the browser or version of IE in order to display/hide content? For example: <!--[if 1 == 0]--> This should be hidden <!--[endif]--> I am considering this option because I send o ...

javascripthtmlif-statement

What is the best way to ensure that JavaScript code is executed in a specific sequence?

Even though I understand that Javascript is not the same as C# or PHP, I keep encountering an issue with Javascript - specifically with how I use it. Here's the scenario: function updateStatuses(){ showLoader() //displays 'loader.gif' on ...

javascriptajaxorder-of-execution

Loop through each object and add them to an array in a file using NodeJS

Currently, I have a scenario where I am executing a POST request inside a for loop function and the response needs to be stored as an object in an array file. Below is the code snippet that I am utilizing: var arrayFile = fs.createWriteStream("arrayFile.j ...

javascriptnode.jsarraysfor-loopobject

Prevent the propagation of the ng-click event within a jQuery click event

When a Twitter Bootstrap dropdown is nested inside a tr element, and the tr element is clickable through ng-click, clicking anywhere on the page will collapse the dropdown menu. This behavior is defined in a directive using $document.bind('click' ...

jqueryangularjstwitter-bootstrapangular-ui-bootstrapangularjs-ng-click

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

javascripthtmlcss

Ways to prevent an empty iframe from triggering a load event upon injection

I have implemented a technique where I am using an empty frame to handle pseudo-asynchronous form submission. This involves referencing the frame's name attribute in the form's target attribute, allowing the form's action URI to resolve in t ...

javascripthtmljquerydomjquery-events

Show the message "No results found" if there are no matches, or hide the DIV displaying search results using AJAX and MySQL

I'm struggling with getting my search bar to display "No matches found" or hide the results div completely when a query doesn’t match any “Name” in the MySQL database. The search bar works for displaying AJAX live search results using MySQL, PHP ...

javascriptphpmysqlajax

Leverage the AJAX Search Lite Plugin within the top navigation of your WordPress website's header file

I am interested in utilizing the "AJAX Search Lite 3.0.6" plugin within my WordPress Theme. Plugin Link After implementing the shortcode, I noticed that it was not appearing on the navigation bar as expected: <body> <!-- Header --> & ...

javascriptphpjqueryajaxwordpress

The background color should only cover a specific percentage of the element

Here is the current structure I have: <li class="myclass" ng-class="myAngularClass"> <div> div1 <div> div2 </div> </div> </li> The li element has dynamic dimensions and width. The class "myAngularClass" i ...

cssangularjs

Error in THREE.js: The function material.onBeforeRender is not defined

Can someone assist me with an error I'm encountering while trying to run my code in Three.js? The error message reads as follows: three.js:19528 Uncaught TypeError: material.onBeforeRender is not a function at renderObject (three.js:19528) at ...

javascripthtmlthree.js

"Auth.currentSession is indicating that there is no user currently logged in

I am currently working on a basic React app with authentication using aws-amplify. My user pool is set up in Cognito and I can successfully redirect the user to the hosted UI for login. However, when trying to retrieve the current session, I am receiving a ...

javascriptreactjsamazon-cognitoaws-amplify

Creating a customized Chrome extension that triggers a script upon the user selecting and highlighting text on a webpage

Is there a way to detect if something is currently highlighted on the page using a trigger or variable? ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Switch Between More and Less Text - Implement Smooth Transition on Shopify Using Javascript

I recently implemented a More/Less toggle button using resources from this website. The functionality is there, but I now want to add a smooth transition effect. When the user clicks on "read more," I would like the hidden content to gradually appear, and ...

javascripthtmljqueryshopify

Experience real-time updates on webpages with Node.js and Socket.io

Seeking to integrate real-time push notification updates from a node.js server to the browser client. Explored socket.io at http://socket.io/docs/rooms-and-namespaces/ The business requirement involves users viewing a page with customer information and o ...

javascriptnode.jsexpresssocket.io

I need to arrange an array in Angular in the order of 0, 00, 000, 0000, 01, and 02 from top to bottom

Looking to sort an array in AngularJS, here is the current format: [{ id :0 },{ id:000 },{ id :00 },{ id:0000 },{ id:01 },{ id:03 }] The desired sorting order should be ...

angularjs

Adjust the jQuery.animate function based on the specific value

When the button with the class name btn is clicked, the element with the class name img-box will transition with animation. I want to adjust the animation based on the current position of the img-box. After the first click on the button, the element mo ...

javascriptjqueryjquery-animate

Is it possible to have two unique keys in a single MongoDB schema?

Currently attempting to achieve this functionality using mongoose: const newContent = new Schema({ heading: { type: String, unique: true }, url: { type: String, unique: true }, //... }); However, an error is being thrown: MongoError: E11000 dupl ...

javascriptnode.jsmongodbmongoose