Pre-selected value with angular.js

  angularjs, drop-down-menu, html, javascript

I am trying to have a pre-selected value in my angular.js select drop-down. The pre-selected value must:

  • Display a user’s personalized state based on internal data
  • The value must be the state’s abbreviation
  • The user must be able to also select a different state if they would like to change their state

##Property_State## is the individuals state from the database that needs to be the full states name displayed, but the value needs to be the abbreviation. The user cannot see the state’s abbreviation anywhere in the dropdown. This is where I am stuck. I keep seeing the abbreviation in the drop down no matter what.

<label class="rz-color-blue rz-font-phh-m mb-0 pt-3"
                    >State: <sup>*</sup></label
                  >
                  <select
                    name="Property_State"
                    class="form-control rz-font-phh-l"
                    value="##Property_State##"
                    ng-model="main.contact.state"
                    style="
                      background-color: #d9eaf7;
                      border-color: #d9eaf7;
                      height: 2em;
                    "
                  >
                    <option
                      value="{{ state.abbreviation }}"
                      select="selected"
                    >
                      ##Property_State##
                    </option>
                    <option
                      ng-repeat="state in main.states"
                      value="{{state.abbreviation}}"
                    >
                      {{state.name}}
                    </option>
                  </select>
                </div>
(function () {
        "use strict";
        angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
        function MainCtrl($document, $timeout, $window) {
          var main = this;
          var EMAIL_REG = RegExp(
            /^[_a-zA-Z0-9-]+(.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*(.[a-zA-Z]{2,20})$/
          );
          var PHONE_REG = RegExp(/^d{10}$/);
          main.now = new Date();
          main.contact = {
            firstName: "##First_Name##",
            lastName: "##Last_Name##",
            email: "##Primary_Email##",
            phone: "##Primary_Phone##",
            state: "##Property_State##",
            city: "##Property_City##",
          };

          main.states = [
            { name: "Alabama", abbreviation: "AL" },
            { name: "Alaska", abbreviation: "AK" },
            { name: "Arizona", abbreviation: "AZ" },
            { name: "Arkansas", abbreviation: "AR" },
            { name: "California", abbreviation: "CA" },
            { name: "Colorado", abbreviation: "CO" },
            { name: "Connecticut", abbreviation: "CT" },
            { name: "Delaware", abbreviation: "DE" },
            { name: "Florida", abbreviation: "FL" },
            { name: "Georgia", abbreviation: "GA" },
            { name: "Hawaii", abbreviation: "HI" },
            { name: "Idaho", abbreviation: "ID" },
            { name: "Illinois", abbreviation: "IL" },
            { name: "Indiana ", abbreviation: "IN" },
            { name: "Iowa", abbreviation: "IA" },
            { name: "Kansas", abbreviation: "KS" },
            { name: "Kentucky", abbreviation: "KY" },
            { name: "Louisiana", abbreviation: "LA" },
            { name: "Maine", abbreviation: "ME" },
            { name: "Maryland", abbreviation: "MD" },
            { name: "Massachusetts", abbreviation: "MA" },
            { name: "Michigan", abbreviation: "MI" },
            { name: "Minnesota", abbreviation: "MN" },
            { name: "Mississippi", abbreviation: "MS" },
            { name: "Missouri", abbreviation: "MO" },
            { name: "Montana", abbreviation: "MT" },
            { name: "Nebraska", abbreviation: "NE" },
            { name: "Nevada", abbreviation: "NV" },
            { name: "New Hampshire", abbreviation: "NH" },
            { name: "New Jersey", abbreviation: "NJ" },
            { name: "New Mexico", abbreviation: "NM" },
            { name: "New York", abbreviation: "NY" },
            { name: "North Carolina", abbreviation: "NC" },
            { name: "North Dakota", abbreviation: "ND" },
            { name: "Ohio", abbreviation: "OH" },
            { name: "Oklahoma", abbreviation: "OK" },
            { name: "Oregon", abbreviation: "OR" },
            { name: "Pennsylvania", abbreviation: "PA" },
            { name: "Rhode Island", abbreviation: "RI" },
            { name: "South Carolina", abbreviation: "SC" },
            { name: "South Dakota", abbreviation: "SD" },
            { name: "Tennessee", abbreviation: "TN" },
            { name: "Texas", abbreviation: "TX" },
            { name: "Utah", abbreviation: "UT" },
            { name: "Vermont", abbreviation: "VT" },
            { name: "Virginia", abbreviation: "VA" },
            { name: "Washington", abbreviation: "WA" },
            { name: "West Virginia", abbreviation: "WV" },
            { name: "Wisconsin", abbreviation: "WI" },
            { name: "Wyoming", abbreviation: "WY" },
          ];

Source: Ask Javascript Questions

LEAVE A COMMENT