2016-06-22 6 views
0

次のコードは正常に動作していますが、私が直面している唯一の問題は最初の(選択されていない)私はここで間違っていることを知っています。最初の選択オプションに応じて2番目の選択肢でブランクオプションを取得する - AngularJS

コード -

<div> 
    <h3>Select a country</h3> 
    <select id="select-02" 
      class="slds-select" 
      name="country" 
      ng-model="myForm.companyaddress.country" 
      ng-options="conList.name for conList in countryList track by conList.id" 
      ng-init="myForm.companyaddress.country = countryList[0]" 
      ng-change="stateList = myForm.companyaddress.country.states" 
      style="height: 37px;"> 
    </select> 
</div> 

<div> 
    <h3>Select a state</h3> 
    <select 
     id="select-03" 
     class="slds-select" 
     style="height: 44px;" 
     ng-init="myForm.companyaddress.state = countryList[0].states[0]" 
     ng-options="sList.name for sList in stateList track by sList.stateid" 
     ng-model="myForm.companyaddress.state"> 
    </select> 
</div> 

スクリプト -

var myApp = angular.module('myApp', []); 

    myApp.controller('mainCtrl', function($scope){ 

     $scope.countryList = [ 
      { 
       id: null, 
       name: 'Please Select', 
       states: [ 
        {name: 'Please Select', stateid: null} 
       ] 
      }, 
      { 
       id: 1, 
       name: 'United States of America', 
       states: [ 
       {name: 'Alabama', stateid: 1}, 
       {name: 'Alaska', stateid: 2}, 
       {name: 'Arizona', stateid: 3} 
       ] 
      }, 
      { 
       id: 2, 
       name: 'Australia', 
       states: [ 
       {name: 'Australian Capital Territory', stateid: 1}, 
       {name: 'New South Wales', stateid: 2}, 
       {name: 'Northern Territory', stateid: 3} 
       ] 
      }, 
     ]; 

     $scope.stateList = $scope.countryList[0].states; 
    }) 

ワーキングPlnkr - 私がこれまで見http://plnkr.co/edit/ZYmMJG8CbxrpdOjuUh9k?p=preview

答えて

1

問題は、一度、あなたが国にあるmyFormを選択したことです。 companyaddress.stateオプションがオプションのリストにないので、それは空白です

あなたはこの

ng-change="stateList = myForm.companyaddress.country.states; myForm.companyaddress.state = stateList[0]" 

チェックのために、このplnkrをあなたの最初のNG-変更を変更することができます

http://plnkr.co/edit/ZYmMJG8CbxrpdOjuUh9k

関連する問題