Question

我有一个带有一些选项的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.

请帮忙吗？

Answer 1

试试这种方式

<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];**
}])

Answer 2

如何使用ngSelected？ http://docs.angularjs.org/api/ng/directive/ngSelected

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

或

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

Answer 3

工作示例：http://plnkr.co/edit/yv8gew3IDGxjH666UmlC?p=preview

<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无匹配列表。

Answer 4

我没有足够的声誉来评论，所以我会留下它作为答案。

Ramesh Rajendran的回答是对的，但您尝试使用不同的ngOptions语法。如果使用label for value in array语法，则必须将model属性绑定到整个对象。如果您使用评论中的语法select as label for value in array，那么您必须将模型绑定到选择。

换句话说，他的示例有效，并且您的评论工作示例需要将$scope.selectedlanguage = $scope.languages[0];替换为$scope.selectedlanguage = $scope.languages[0].i18n;

查看select directive documentation以获取更多信息

Answer 5

这对我有用：

$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

在ng选择中设置默认值

5 个答案: