Предварительно выбранное значение с angular.js

#javascript #html #angularjs #drop-down-menu

Вопрос:

Я пытаюсь иметь предварительно выбранное значение в своем angular.js выберите раскрывающийся список. Предварительно выбранное значение должно:

  • Отображение персонализированного состояния пользователя на основе внутренних данных
  • Значение должно быть аббревиатурой штата
  • Пользователь должен также иметь возможность выбрать другое состояние, если он хочет изменить свое состояние

##Property_State## — это состояние отдельных лиц из базы данных, которое должно быть отображено полным именем состояния, но значение должно быть аббревиатурой. Пользователь не может видеть аббревиатуру штата нигде в раскрывающемся списке. Вот где я застрял. Я продолжаю видеть аббревиатуру в выпадающем списке, несмотря ни на что.

 <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" },
          ]; 

Комментарии:

1. Взгляните на этот пример plnkr.co/edit/cTph7cwR2vIsSOH8