2016-04-15 19 views
0

JSON呼び出しからselect要素に選択したオプションを動的に設定しようとしています。私はオプションがこのメソッドを使って静的である場合に設定することができますが、私の人生にとっては、ng-optionsまたはng-repeatのいずれかを使ってオプションを設定するときには設定できません。ここでは1ドロップダウンのための私のHTMLは次のとおりです。ng-model、ng-init、ng-options、フォームコレクションを使用して角度設定を選択しました

<select class="form-control" id="authQLang" name="authQLang" ng-model="content.languages" ng-options="item as item.name for item in languages track by item.code" ng-init="content.languages == defaultLang" required> 
    <option value="">Select a language</option> 

    </select> 

そして、私のコントローラのコード:

$scope.content = data.data; 
    $scope.defaultAcct = data.data.defaultAccount.ID; 
    $scope.defaultLang = data.data.defaultLanguage.code; 
    $scope.accounts = []; 
     angular.forEach(data.data.accounts, function(value, key) { 
      $scope.accounts.push(value); 
     }); 
    $scope.languages = []; 
     angular.forEach(data.data.languages, function(value, key) { 
      $scope.languages.push(value); 
     }); 

とJSON形式:

{ 
"code": 0, 
"message": "", 
"data": { 
    "defaultAccount": { 
     "ID": "6481618", 
     "name": "Account X" 
    }, 
    "defaultLanguage": { 
     "code": "en-US", 
     "name": "English US" 
    }, 
    "accounts": [{ 
     "ID": "6481004", 
     "name": " Account A." 
    },... 
    "languages": [{ 
     "code": "en-us", 
     "name': "English US" 
    },... 

答えて

1

ng-initを取り除くには、コントローラーでこの値を設定するほうがはるかに優れています。また、コントローラーから変更すると、選択が変更されます。次に、あなたのコントローラで

<select class="form-control" id="authQLang" 
    name="authQLang" ng-model="content.languages" 
    ng-options="item as item.name for item in languages track by item.code" 
    required> 
    <option value="">Select a language</option> 
</select> 

$scope.content = data.data; 
$scope.defaultAcct = data.data.defaultAccount.ID; 
$scope.defaultLang = data.data.defaultLanguage.code; 
$scope.accounts = []; 
    angular.forEach(data.data.accounts, function(value, key) { 
     $scope.accounts.push(value); 
    }); 
$scope.languages = []; 
    angular.forEach(data.data.languages, function(value, key) { 
     $scope.languages.push(value); 
    }); 

# add this: 
$scope.content.languages = $scope.defaultLang 

、ちょうどあなたが選択を変更したい任意の時間$scope.content.languagesを更新します。

ああ、あなたのng-initには==があり、初期値設定が正しく行われませんでした。

+0

私はこれを前に試しましたが、もう一度試しましたが、それでも動作しません。まだ値が設定されていないオプション以外は、選択されていません。理由は次のとおりです。POSTでフォームにデータをプッシュするために$ scope.contentのサブセットを使用しています。 DOMでこれらのサブセットにアクセスしようとすると、私はできません。私は、ポストリクエストのペイロード内のデータしか見ることができません。 –

+0

おっと!私はそれを取り戻す!ありがとうございました!私はdata.data.defaultLanguage.codeをdata.data.defaultLanguageに変更しなければならず、それは魅力的に機能しました! –

関連する問題