Select box failing to display default value

Question

Select box failing to display default value

I am dealing with a specific data structure:

$scope.personalityFields.traveller_type = [
  {"id":1,"value":"Rude", "color":"red"},
  {"id":2,"value":"Cordial", "color":"yellow"},
  {"id":3,"value":"Very Friendly", "color":"green"},
];

Also, there is a select box set up like this:

<select map-value name="traveller_type" ng-init="init_select()" class="full-width" ng-model="traveller_type" ng-options="item as item.value for item in personalityFields.traveller_type">
  <option value="" disabled selected> Choose ...</option>
</select>

I need assistance on how to automatically set the select box value based on a response that correlates to the "value" field within the JSON data. Specifically, if the response indicates "Rude" for traveller_type, then "Rude" should be displayed in the select box. Here is an example of the response object structure:

someObject = {
    traveller_type: "Rude"
}

This information from the response should be reflected in the select box.

javascript angularjs angularjs-ng-options

Answer 1

Answer №1

If the response returns only a single value ("Rude", "Cordial", or "Friendly"), you will need to adjust the syntax of ngOptions to

ng-options="item.vaue as item.value for item in personalityFields.traveller_type"

(binding item.value to the options).

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.traveller_type = 'Rude';
    $scope.personalityFields = {
      "traveller_type": [{
          "id": 1,
          "value": "Rude",
          "color": "red"
        },
        {
          "id": 2,
          "value": "Cordial",
          "color": "yellow"
        },
        {
          "id": 3,
          "value": "Very Friendly",
          "color": "green"
        },
      ]
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
                    item.vaue as item.value for item in personalityFields.traveller_type">
    <option value="" disabled selected> Choose ...</option>
  </select>
  {{traveller_type}}
</div>

Alternatively, if the response returns the entire object (

{"id":1,"value":"Rude", "color":"red"}

), you should adjust the syntax of ngOptions to

ng-options="item as item.value for item in personalityFields.traveller_type track by item.value"

(using track by to compare only the value property).

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.traveller_type = {
          "id": 1,
          "value": "Rude",
          "color": "red"
        };
    $scope.personalityFields = {
      "traveller_type": [{
          "id": 1,
          "value": "Rude",
          "color": "red"
        },
        {
          "id": 2,
          "value": "Cordial",
          "color": "yellow"
        },
        {
          "id": 3,
          "value": "Very Friendly",
          "color": "green"
        },
      ]
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
                    item as item.value for item in personalityFields.traveller_type track by item.value">
    <option value="" disabled selected> Choose ...</option>
  </select>
  {{traveller_type}}
</div>

Answer 2

If the response returns only a single value ("Rude", "Cordial", or "Friendly"), you will need to adjust the syntax of ngOptions to

ng-options="item.vaue as item.value for item in personalityFields.traveller_type"

(binding item.value to the options).

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.traveller_type = 'Rude';
    $scope.personalityFields = {
      "traveller_type": [{
          "id": 1,
          "value": "Rude",
          "color": "red"
        },
        {
          "id": 2,
          "value": "Cordial",
          "color": "yellow"
        },
        {
          "id": 3,
          "value": "Very Friendly",
          "color": "green"
        },
      ]
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
                    item.vaue as item.value for item in personalityFields.traveller_type">
    <option value="" disabled selected> Choose ...</option>
  </select>
  {{traveller_type}}
</div>

Alternatively, if the response returns the entire object (

{"id":1,"value":"Rude", "color":"red"}

), you should adjust the syntax of ngOptions to

ng-options="item as item.value for item in personalityFields.traveller_type track by item.value"

(using track by to compare only the value property).

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.traveller_type = {
          "id": 1,
          "value": "Rude",
          "color": "red"
        };
    $scope.personalityFields = {
      "traveller_type": [{
          "id": 1,
          "value": "Rude",
          "color": "red"
        },
        {
          "id": 2,
          "value": "Cordial",
          "color": "yellow"
        },
        {
          "id": 3,
          "value": "Very Friendly",
          "color": "green"
        },
      ]
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
                    item as item.value for item in personalityFields.traveller_type track by item.value">
    <option value="" disabled selected> Choose ...</option>
  </select>
  {{traveller_type}}
</div>

Answer 3

Answer №2

There are a few errors in your code snippet, but here is a revised version that can help you achieve your objective:

angular.module('limitToExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.serverResponse = {
          "id": 1,
          "value": "Rude",
          "color": "red"
        };
        $scope.personalityFields = {

          traveller_type: [{
            "id": 1,
            "value": "Rude",
            "color": "red"
          }, {
            "id": 2,
            "value": "Cordial",
            "color": "yellow"
          }, {
            "id": 3,
            "value": "Very Friendly",
            "color": "green"
          }],
        }

      }]);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example103-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>



</head>

<body ng-app="limitToExample">
  
  <div ng-controller="ExampleController">
    <select map-value name="traveller_type" class="full-width" ng-model="serverResponse" ng-options="item as item.value for item in personalityFields.traveller_type track by item.value">

</select>

  </div>
</body>

</html>

This method demonstrates one way to set a default value, which can be further tailored based on the server response (if that's your requirement).

I have simply rephrased what @Pengyy has suggested in their answer, so feel free to consider their solution over mine.

Answer 4

There are a few errors in your code snippet, but here is a revised version that can help you achieve your objective:

angular.module('limitToExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.serverResponse = {
          "id": 1,
          "value": "Rude",
          "color": "red"
        };
        $scope.personalityFields = {

          traveller_type: [{
            "id": 1,
            "value": "Rude",
            "color": "red"
          }, {
            "id": 2,
            "value": "Cordial",
            "color": "yellow"
          }, {
            "id": 3,
            "value": "Very Friendly",
            "color": "green"
          }],
        }

      }]);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example103-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>



</head>

<body ng-app="limitToExample">
  
  <div ng-controller="ExampleController">
    <select map-value name="traveller_type" class="full-width" ng-model="serverResponse" ng-options="item as item.value for item in personalityFields.traveller_type track by item.value">

</select>

  </div>
</body>

</html>

This method demonstrates one way to set a default value, which can be further tailored based on the server response (if that's your requirement).

I have simply rephrased what @Pengyy has suggested in their answer, so feel free to consider their solution over mine.

Select box failing to display default value

Answer №1

Answer №2

Similar questions

Is it possible to hide and reveal specific form elements based on the selection of a checkbox?

Tips on accessing a specific element that has been mapped in React?

Retrieve the present time of an ongoing CSS3 animation

I'm seeking some assistance in resolving my JavaScript issue

"Dynamic value changes in bootstrap multiselect dropdowns triggered by selection in another multiselect dropdown

Exploring file writing using Node Webkit and JavaScript

Ways to create space around Navbar MUI for a more balanced design

React Navigation ran into an issue with the specified location

Removing a selected row from a data table using an HTTP request in Angular 2

Exploring Vue's feature of passing props and emitting events within nested components

When I open Firefox, all I see is a blank page with only the h2 heading displayed

Using v-model with the input type files in Vue.js allows for easy two

Angular js encountered an issue with an unrecognized provider: $scopeProvider

Transferring information from one page to the next

What is the easiest way to choose a child vertex with just one click on mxgraph?

Assign the filename to the corresponding label upon file upload

Prevent clicking on a specific column in a table using Jquery

What is causing ui-route to fail in resolving state1 when transitioning from state2?

Trying to assign a value to a property that is not defined

Is there a way to personalize the appearance of a specific page title in my navigation menu?