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

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

Highchart encountering issues with multiple Y axes

My highchart is causing Chrome to crash when I add the second series. I am unable to see the Chrome console for debugging purposes.. :( Does anyone have any suggestions? $(function () { var chart; $(document).ready(function() { chart ...

javascripthighcharts

Problems with Navbar rendering on multiple occasions

GENERAL INFO I've encountered an issue with the re-rendering of my sidemenu in Gatsby. Despite my efforts, I can't prevent the sidemenu from re-rendering and overriding the data that I set for it. const [activeParent, setActiveParent] = useState ...

javascriptreactjsnavigationreact-navigation

What is the best way to extract and count specific values from a JSON file using JavaScript?

My JSON data looks like this: /api/v1/volumes: [ { "id": "vol1", "status": "UP", "sto": "sto1", "statusTime": 1558525963000, "resources": { "disk": 20000000 }, "used_resources": { "disk": 15000000 }, "las ...

javascriptjsonreactjslodash

Unexpected output from nested loop implementation

Having some arrays, I am now trying to iterate through all tab names and exclude the values present in the exclusion list. json1 ={ "sku Brand": "abc", "strngth": "ALL", "area ...

javascripthtmljquerytypescript

Check if the div has been clicked, even if its child elements have also

Is it possible to check if both a div and its child are clicked using jQuery? $('div').click(function(e){ if(e.target.id == 'test') alert(e.target.id); }); I have a specific div with an id of #test in my HTML code, and wh ...

javascriptjquery

Do not procrastinate when updating the navbar elements while navigating through pages

This specific NextJS code is designed to alter the color of the Navbar elements once scrolling reaches 950px from the top or when navigating to a different page that includes the Navbar. Strangely, there seems to be a delay in updating the Navbar colors wh ...

javascriptreactjsnext.jstailwind-css

Steps for integrating an Angular 2 App into Express.js as a view

I am currently working on developing an Angular 2 app that requires data from a script running on the server. To achieve this, I am attempting to integrate my existing Angular app as a view within an express application, similar to the process demonstrated ...

javascriptangularjsnode.jsexpressserver

Error: The term "Worker" is undefined in a new Nextjs project

I'm currently looking into an issue where I am attempting to import a webpacked javascript file into a NextJS project that utilizes Worker, but I keep encountering the error message ReferenceError: Worker is not defined. I've simplified it down t ...

javascriptwebpacknext.jsweb-worker

Incorporating Javascript into a .Net MVC 3 Project

It seems like there should be a straightforward solution to my question, but I'm struggling with it. I have an animation.js file that includes dependency_1.js and dependency_2.js in an include folder. Within my animation.js file, I load these dependen ...

javascriptasp.net-mvc-3c#-4.0

What is the best way to eliminate spaces in $location.search()?

While using $location.search('event', data);, I've encountered an issue where the URL displays something like this: ?event=arsenal%20fc%20 I am looking to remove these spaces in order to get: arsenalfc ...

angularjs

Display the map using the fancybox feature

I have added fancybox to my view. When I try to open it, I want to display a map on it. Below is the div for fancybox: <div id="markers_map" style="display:none"> <div id="map_screen"> <div class="clear"></div> </div&g ...

javascriptjquerytypescriptfancyboxmapbox

When package.json is imported, files are not compressed

Currently, I am working on developing a cli package and when it comes to displaying the version, I am utilizing the version imported from package.json. Upon running tsc, the structure of the dist folder appears as follows: /dist --/package.json --/README. ...

javascripttypescriptnpmpackage.json

Issues with the functionality of the ZeroClipboard Angular plugin

"> I'm fairly new to Angular and currently experimenting with a module called ZeroClipboard. I've made adjustments to my application in order to incorporate the module and configured it as per the demonstration. var app = angular.module(&a ...

javascriptangularjszeroclipboard

What is the best way to handle multiple JSON data using jQuery?

Understanding how to utilize jquery for parsing simple json is a valuable skill. json { "Symbol": "AAL.L", "Name": "ANGLO AMERICAN", "Last": "3061.50", "Date": "7/26/2011", "Time": "11:35am", "Change": "+3 ...

javascriptjqueryjson

Determining the optimal times to utilize traditional loops instead of array helpers

After writing in Javascript for some time, I've become quite comfortable with using array helpers. However, there have been moments where traditional for loops seem more practical and easier to work with compared to array helpers. Can you provide me w ...

javascriptloopsecmascript-6

Incorporating an npm reference into a personalized node within Node-RED

As a novice in both the NodeRed and NodeJs/npm realms, I am embarking on the journey of creating a custom node for the first time. Despite my efforts to follow the official documentation on Creating your first node, I seem to have hit a roadblock. Everyth ...

javascriptnode.jsnode-red

I am experiencing issues with the rendering of my q-btn elements in Quasar and they are

I recently started using Quasar and encountered an issue with my q-btn component buttons displaying white backgrounds at random, despite having added a background-color in the external stylesheets. Here are some examples of this perplexing problem: The e ...

javascripthtmlvue.jssassquasar-framework

What is the best way to combine a string that is constructed across two separate callback functions using Mongoose in Node.js?

I am facing a situation where I have two interconnected models. When deleting a mongo document from the first model, I also need to delete its parent document. There is a possibility of an exception being thrown during the second deletion process. Regardl ...

javascriptnode.jsmongodbexpressmongoose

I am having trouble inserting a table from a JSON object into an HTML file

getJSON('http://localhost:63322/logs', function(err, data) { if (err !== null) { alert('Something went wrong: ' + err); } else { //var myObj = JSON.parse(data); // document.getElementById("demo").innerHTML = myObj.ad_soy ...

javascripthtmljson

jQuery conceal input field after it has been displayed

I've created an HTML form with two different sections for search purposes. The first section displays basic fields, and by clicking on "Advanced Search" (in my case, "Расширенный поиск"), additional fields are revealed. Everything work ...

javascriptjqueryhtmlcss