ng-options默认选中

最新推荐文章于 2020-03-31 16:01:43 发布

Soap_Leutenant

最新推荐文章于 2020-03-31 16:01:43 发布

阅读量919

点赞数 3

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： angular ng-option

本文链接：https://blog.youkuaiyun.com/Soap_Leutenant/article/details/94430051

angular 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在AngularJS中如何设置ng-options的默认选中项，包括使用ng-init、ng-repeat以及当值为对象时的处理方法。通过实例展示了不同场景下设置默认值的具体操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-options默认选中，很简单的问题，网上乱七八糟说不到重点，自己记录下常见的几种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-options默认选中</title>
    <script src="api/angularjs/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h5>使用ng-options，ng-init设默认值</h5>
        <select ng-init="selectedName = names[1]" ng-model="selectedName" ng-options="x for x in names"></select>
        <h5>使用ng-repeat</h5>
        <select ng-model="optionSelected">
            <option ng-repeat="x in names">{{x}}</option>
        </select>
        <h5>使用 ng-options,值为对象</h5>
        <select ng-model="selectSite" ng-options="y for (x,y) in sites"></select>
        <h5>选中的为{{selectSite}}</h5>
    </div>
</body>
 <script type="text/javascript">
     var app = angular.module('myApp',[]);
     app.controller("myCtrl",function ($scope) {
         $scope.names=['google','runoob','taobao'];
         $scope.sites ={
             site01:"google",
             site02:"runboo",
             site03:"taobao"
         };
         $scope.optionSelected=$scope.names[1];//为ng-repeat设默认值
         $scope.selectSite=$scope.sites.site02;//为ng-options设默认值
     })
 </script>
</html>