angular.js select 添加默认选项

最新推荐文章于 2020-12-21 09:57:53 发布

SerchOvO

最新推荐文章于 2020-12-21 09:57:53 发布

阅读量664

点赞数 1

分类专栏： AngularJS 文章标签： angular select angularjs 前端 html

本文链接：https://blog.youkuaiyun.com/qq_34941558/article/details/78335291

版权

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用AngularJS实现动态加载Select组件的数据，并设置默认选项。通过示例代码展示了如何在前端显示从后端获取的数据，并对默认选项的值进行处理。

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

最近做的项目是前后端分离的，前端用的是angular.js，后端用的是Java，有的数据需要从后端拿，然后在前端渲染出来，其中就涉及到了动态加载select中的数据，需要在select中添加默认值，下面是案例

HTML

<div ng-app ng-controller="Controller" class="container">
<select ng-model="myModel" 
     ng-options="record.id as record.value for record in records">
   <option value=''>- Please Choose -</option>
</select>

function Controller($scope) {
    
    $scope.myModel = "";
    
    $scope.records = [{
        id: 1,
        value: "One",
    }, {
        id: 2,
        value: "Two",
    }, {
        id: 3,
        value: "Three",
    },{
        id: 4,
        value: "Four",
    },{
        id: 5,
        value: "Four5",
    }];             
}

这样即可渲染出select的默认选项，当再次选择默认选项时，默认选项的值为null，需要对它做出相应的处理

PS:如果仍无默认选项，则删除select中不必要的属性，再次查看页面，注意清除服务器和浏览器的缓存，避免没有加载最新代码的情况

参考链接