2016-09-02 2 views
0

選択フィールドのデフォルト値を設定オプションに設定しようとしていますが、そのオプションが機能していないため、何が間違っているのか分かりません。私は私のコントローラで選択フィールドでng-selectedが機能しない

$scope.interp_id = "2"; // set the default id 
$http.get("web/controllers/get.php") 
.then(function (response) { 
    $scope.interpreters = response.data.records; 
}); 

get.phpは、JSON(これが正常に機能している)を返すPHPファイルです。

のような私の選択になります。

<select ng-model="interpreters_id"> 
    <option ng-repeat="x in interpreters" value="{{x.id}}" ng-selected="{{x.id == interp_id}}">{{x.first_name}} {{x.middle_name}} {{x.last_name}}</option> 
</select> 

私は私のブラウザで表示するために行くとき、それは次のようになります。 enter image description here enter image description here

が、私は要素を検査する際には、オプションNG-選択することを示しています真です。

enter image description here

私が間違って何をやっていますか?

+1

ここで 'NG-selected'を使用する必要が...それはNG-selected''なしで動作するはずです、私は 'NG-options'ディレクティブ –

答えて

2

ngOptions角度でselect要素を使用するために推奨される方法です。

また、ngSelectedのドキュメントを見ると、やり方をしている選択とngModelプロパティでは正しく動作しないという黄色のボックスがあります。

ngRepeatはあなたのオプション要素を喜んで繰り返すでしょうが、select要素を扱う正しい方法ではありません。

私にはprepared a fiddleがあります。

<div ng-app="ngOptionsApp"> 
    <div ng-controller="ExampleController"> 
     <select ng-model="selectedInterpreter" ng-options="interpreter as interpreter.name for interpreter in interpreters track by interpreter.id"> 
      <option value="">Select an Interpreter</option> 
     </select> 

     {{selectedInterpreter}} 
    </div> 
</div> 

angular.module('ngOptionsApp', []).controller('ExampleController', ['$scope', function($scope) { 
    $scope.interpreters=[{id: 1, name:'Gill Bates'}, {id: 2, name:'Cohn Jarmack'}, {id: 3, name:'Melon Musk'}]; 
    $scope.selectedInterpreter = $scope.interpreters[0]; 
}]); 

はそれが役に立てば幸いません。)

+0

ありがとう!それは確かに – lancey

+0

あなたは2つのNGモデルを持っています目的によってこれはありますか? – lancey

+0

いいえ、申し訳ありませんが、それは悪いコピー/ペーストでした。私は答えを編集します;) 'selectedInterpreter'は有効なNGモデルです。 –

0

ng-selectedディレクティブで中括弧を使用しないでください。これを試してもよろしいですか?

<option ng-repeat="x in interpreters" value="{{x.id}}" ng-selected="x.id == interp_id">{{x.first_name}} {{x.middle_name}} {{x.last_name}}</option> 

http://jsfiddle.net/endrcn/44j19ngp/

+0

より良い使用を言うと思いますこれも私の最初の考えでしたが、それは仕事をしませんでした。その変更を実装し、要素を検査した後は、 'ng-selected = "x.id == interp_id"' – lancey

+0

この問題のコードを記述しました。このリンクを確認することができます: http://jsfiddle.net/endrcn/44j19ngp/ – endrcn

関連する問題