NGSelect内のデフォルト値を設定します

StackOverflow https://stackoverflow.com//questions/22007196

質問

私はそれにいくつかの選択肢を持つNGSelectを持っています。

<select data-ng-model="type" data-ng-change="option(type)">
   <option data-ng-repeat="type in languages" value="{{type.i18n}}">
        {{type.language}}
    </option>
</select>
.

とコントローラ

angular.module('navigation', [])
.controller('NavCtrl',['$scope','$translate', function($scope,$translate){

    $scope.option = function(type){
        console.log(type) //this display the i18n value of languages
        $translate.use(type);
    }

    $scope.languages = [
        { language: "English", i18n: "en_EN"},
        { language: "Swedish", i18n : "se_SE" }
    ];
}])
.

NGSelectにデフォルトのオプションを持つことができます。私はそれを設定しようとしました：

$scope.type = $scope.languages[0].language; // English
$scope.type = $scope.languages[0]; //The whole darn json object.
.

助けてください？

役に立ちましたか？

解決

このようにしてみてください

<select  ng-model="selectedlanguage" ng-change="option(this.selectedlanguage)"  ng-options="i.language for i in languages">
            </select>
.

// JSコード

angular.module('navigation', [])
.controller('NavCtrl',['$scope','$translate', function($scope,$translate){

    $scope.option = function(type){
        console.log(type) //this display the i18n value of languages
        $translate.use(type);
    }

    $scope.languages = [
        { language: "English", i18n: "en_EN"},
        { language: "Swedish", i18n : "se_SE" }
    ];

    **$scope.selectedlanguage = $scope.languages[0];**
}])
.

他のヒント

ngSelectedの使用方法は？ http://docs.angularjs.org/api/ng/ directive/ngselected 

<option ng-selected="$index==0"></option>
.

または

<option ng-selected="type.language=='English'"></option>
.

作業例： http://plnkr.co/edit/yv8gew3idgxjh666umlc?p=previewew 

<select data-ng-model="selectedType">
  <option data-ng-repeat="lang in languages" value="{{lang.i18n}}">
    {{lang.language}}
  </option>
</select>
.

js ：

.controller('NavCtrl',['$scope', function($scope){

    $scope.$watch('selectedType', function(type){
        if (!type) return;
        console.log(type) //this display the i18n value of languages
        // $translate.use(type);
    });

    $scope.languages = [
        { language: "English", i18n: "en_EN"},
        { language: "Swedish", i18n : "se_SE" }
    ];

    $scope.selectedType = $scope.languages[0].i18n;
}]);
.

ノート：

  • 再生を容易にするために$translateサービスを削除しました。
  • は、ng-changedの$watchに$scopeコールバックを変更しましたが、それが単に審美的な選択です。
  • 重要な変更は、lang.i18n用のtypeを選択していましたが、typeにlang.languageを設定していたため、optionリストに一致しません。

コメントするのに十分な評判がないので、答えとして任せます。

Ramesh Rajendranの答えは正しいですが、異なるngOptions構文を使用してみました。 label for value in array構文を使用する場合は、モデル属性をオブジェクト全体にバインドする必要があります。 select as label for value in arrayのコメントの構文を使用する場合は、モデルを選択にバインドする必要があります。

順番には、彼の例の作品、そしてあなたが$scope.selectedlanguage = $scope.languages[0];

に置き換える必要があるコメントのあなたの例に、

詳細については、ディレクティブドキュメント

を選択してください。

これは私のために働いた：

$scope.prop = { "values": 
[ {name:'hello1',id:1},{name:'hello2',id:2},{name:'hello3',id:3}] };
$scope.selectedValue = 2; 

<select ng-model="selectedValue" ng-options="v.id as v.name for v in prop.values">
    <option selected value="">Select option</option>
</select>
.

ライブ例： Plunker

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top