AngularJSドロップダウンのデフォルト値を設定します

Question

私は以下のコードを使用しています。

HTMLコード

<form name="profInfoForm" ng-submit="saveInfo(profInfoForm)" novalidate> 
    <div class="wrapper"> 
     <div class="container"> 
      <section class="main-ctr"> 
       <div class="error-msg" ng-show="showErrorMsg"> 
        <div class="text">Please fix the validation error(s) below and try again.<br />{{serviceErrorMsg}}</div> 
       </div> 
       <div ng-include="'views/header.html'"></div> 
       <main class="sm-main"> 
        <section class="fix-section"> 
         <h1>Professional information</h1> 
         <div class="lg-form"> 
          <div class="form-group"> 
           <label class="text-label lg-label">Salutation</label> 
           <div class="select-wrap lg-select"> 
            <select class="form-input select" name="salutation" required ng-init="profInfo.salutation = item[0]" 
              ng-options="item.name as item.name for item in salutations" 
              ng-model="profInfo.salutation"> 
            </select> 
            <div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched"> 
             <span ng-show="profInfoForm.salutation.$error.required">Required Field</span> 
            </div> 
           </div> 
          </div> 
         </div> 
        </section> 
        <div class="clear"></div> 
        <div class="button-ctr"> 
         <button class="button" ng-class="profInfoForm.$valid ? 'active' : 'disable'">Next</button> 
        </div> 
       </main> 
      </section> 
     </div> 
    </div> 
    <div id="loading" ng-if="showLoader"> 
     <img src="images/loader.gif" id="loading-image"> 
    </div> 
</form> 

マイconstant.js

.constant('APP_CONSTANTS', { 
    SALUTATIONS: [{ id: 0, name: 'Select' }, { id: 1, name: 'Mr.' }, { id: 2, name: 'Mrs.' }, { id: 3, name: 'Miss' }, { id: 4, name: 'Dr.' }, { id: 5, name: 'Ms'}] 
}) 

コントローラー・コードは、私がダウンリストSalutationドロップのデフォルト値を設定したい

.controller('professionalInfoCtrl', ['$rootScope', '$scope', '$state', 'globalService', 'APP_CONSTANTS', 'dataServices', function ($rootScope, $scope, $state, globalService, APP_CONSTANTS, dataServices) { 
    $scope.showLoader = false; 
    $scope.profInfo = userData; 
    $scope.salutations = APP_CONSTANTS.SALUTATIONS; 
}]) 

以下の通りです。

これは私がng-initを使用していますが、これは機能しません。私は問題を見つけていない。

Answer 1

私はコード

<select class="form-input select" ng-model="profInfo.salutation" required 
    ng-options="item.name as item.name for item in salutations"> 
    <option value="">Select salutation...</option> 
</select> 
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched"> 
    <span ng-show="profInfoForm.salutation.$error.required">Required Field</span> 
</div> 

の下に、私は

<option value="">Select salutation...</option> 

みんなありがとうを使用していますように、簡単な使用して、私の問題を解決しました。

Answer 2

AngularUIのui-selectを使用することを検討してください：

<ui-select ng-model="$parent.company"> 
     <!-- using $parent - https://github.com/angular-ui/ui-select/issues/18 --> 

     <ui-select-match>{{$select.selected.name}}</ui-select-match> 
     <ui-select-choices repeat="company in companies>{{company.name}}</ui-select-choices> 
</ui-select>