Pre-selected default value in select box using ng-options

Question

Pre-selected default value in select box using ng-options

I'm working on setting a default value in my select box, retrieved from the database, using ng-options.

Here's my view:

<select class="form-control samlength modalinput" 
        ng-options="p.procid as p.procname for p in processes track by p.procid" 
        ng-model="p.procid">
  <option value="">-- choose an option --</option>
</select>

The value p.procid corresponds to data from the database.

My dataset:

procid  procname    time
    1   MyProcess   2018-05-30 13:34:54.097 3003162
    3   Testing     2018-05-31 18:31:32.467 3003162

If I want to pre-select procid as 3 by default, how can I achieve this?

For your information - I've tried various solutions suggested in other discussions. Additionally, I attempted using ng-init, but without success.

sql angularjs sql-server ng-options angularjs-ng-options

Answer 1

Answer №1

To maintain your HTML structure, you can use the following code:

<select class="form-control samlength modalinput" 
        ng-options="p.procid as p.procname for p in processes track by p.procid" 
        ng-model="selectedProcess">
  <option value="">-- select an option --</option>
</select>

If there's a need to choose a specific item from the array, you can achieve this by searching through the array and matching the value at the specified key:

function findIndexByValue(arrayToSearch, key, valueToSearch) {
    for (var i = 0; i < arrayToSearch.length; i++) {
      if (arrayToSearch[i][key] == valueToSearch) {
        return i;
      }
    }
    return null;
}

Invoke this function like so:

var index = findIndexByValue($scope.processes, "procid", procid);
$scope.selectedProcess = $scope.processes[index];
alert(index);

Give it a try and hopefully it meets your requirements!

Answer 2

To maintain your HTML structure, you can use the following code:

<select class="form-control samlength modalinput" 
        ng-options="p.procid as p.procname for p in processes track by p.procid" 
        ng-model="selectedProcess">
  <option value="">-- select an option --</option>
</select>

If there's a need to choose a specific item from the array, you can achieve this by searching through the array and matching the value at the specified key:

function findIndexByValue(arrayToSearch, key, valueToSearch) {
    for (var i = 0; i < arrayToSearch.length; i++) {
      if (arrayToSearch[i][key] == valueToSearch) {
        return i;
      }
    }
    return null;
}

Invoke this function like so:

var index = findIndexByValue($scope.processes, "procid", procid);
$scope.selectedProcess = $scope.processes[index];
alert(index);

Give it a try and hopefully it meets your requirements!

Answer 3

Answer №2

Make sure to update your HTML code like this:

<select ng-model="processSelected" 
     ng-options="p.procname for p in processes track by p.procid">
</select>

After that, initialize your model value in the controller as follows:

$scope.processSelected = $scope.processes[1];

Remember that $scope.processes represents an array of process objects.

Check out this Plunker Example

Answer 4

Make sure to update your HTML code like this:

<select ng-model="processSelected" 
     ng-options="p.procname for p in processes track by p.procid">
</select>

After that, initialize your model value in the controller as follows:

$scope.processSelected = $scope.processes[1];

Remember that $scope.processes represents an array of process objects.

Check out this Plunker Example

Pre-selected default value in select box using ng-options

Here's my view:

My dataset:

Answer №1

Answer №2

Similar questions

getting rid of the angular hash symbol and prefix from the anchor tag

Creating an unsorted list from information in a database table: A step-by-step guide

Invoke the ng-click function within the ng-change function

Choosing an option from a selection dropdown using Protractor

What is the best way to integrate environment-specific configuration options into an AngularJS and Typescript project?

Minimizing switch-case statement into inactive input field (AngularJS)

It seems that there is an issue with accessing the root directory while utilizing the yo

Comparison between SQL and jQuery regarding String Length Problems

The changes to the grid options do not reflect immediately on the UI Grid interface

Exploring Angular Applications with Search Engine Crawlers on ASP.NET

Tips for efficient navigation through posts when they are loaded via a JSON file

The attempt to initiate the MongoDB server was unsuccessful. dbexit reported an error with code 48 within the MongoDB system

Using the ng-change directive in an ng-repeat loop within AngularJS allows

The attempt to create the maq module was unsuccessful

In need of a collection of modules determined by a DefinePlugin constant

Using AngularJS to Filter Array Elements

Create a Rest API and implement server-side rendering concurrently using SailsJs

Distinguishing between {{::somevalue}} and {{somevalue}} in AngularJSIs there a

The animation in an AngularJS directive only functions properly when utilizing $timeout

Unable to process form submission with AngularJS + Stormpath