AngularJS select设置默认值的实现方法

发布时间 - 2026-01-11 02:58:00    点击率:

AngularJS的select设置默认值

在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现

<!DOCTYPE html> 
<html ng-app="noteApp" ng-controller="noteCtrl"> 
<head> 
 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="../plugins/angular.min.js"></script> 
 
</head> 
<body ng-app="noteApp" ng-controller="noteCtrl"> 
  <select ng-options="act.id as act.name for act in typeList" 
    ng-model="ZNoteVo.type"></select> 
 
</body> 
<script type="text/javascript"> 
  angular.module("noteApp", []).controller("noteCtrl", function($scope) { 
    $scope.typeList = [ { 
      id : '01', 
      name : "任务" 
    }, { 
      id : '02', 
      name : "日志" 
    }, { 
      id : '03', 
      name : "会议" 
    }, { 
      id : '04', 
      name : "学习" 
    }, { 
      id : '05', 
      name : "总结" 
    }, { 
      id : '99', 
      name : "其他" 
    } ]; 
    $scope.ZNoteVo={}; 
    $scope.ZNoteVo.type = "03"; 
  }); 
</script> 
</html> 

当我们选择类型是03时则默认是会议

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持,如有疑问请留言或者到本站社区交流讨论,大家共同进步!


# AngularJS  # select  # select默认选择  # select应用  # AngularJS service之select下拉菜单效果  # AngularJS实现select的ng-options功能示例  # angularjs的select使用及默认选中设置  # AngularJS Select(选择框)使用详解  # angularjs 实现带查找筛选功能的select下拉框实例  # Angularjs实现带查找筛选功能的select下拉框示例代码  # AngularJS基础 ng-selected 指令简单示例  # AngularJS入门教程之Select(选择框)详解  # 如有  # 希望能  # 当我们  # 谢谢大家  # 绑定  # 默认值  # 共同进步  # 时则  # 疑问请  # noteCtrl  # head  # controller  # ng  # app  # noteApp  # meta  # content  # http  # equiv  # keywords 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel如何编写单元测试和功能测试?(PHPUnit示例)  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  Swift中switch语句区间和元组模式匹配  网站制作大概要多少钱一个,做一个平台网站大概多少钱?  如何在阿里云ECS服务器部署织梦CMS网站?  西安专业网站制作公司有哪些,陕西省建行官方网站?  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  如何在七牛云存储上搭建网站并设置自定义域名?  php485函数参数是什么意思_php485各参数详细说明【介绍】  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  个人网站制作流程图片大全,个人网站如何注销?  如何打造高效商业网站?建站目的决定转化率  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  百度浏览器如何管理插件 百度浏览器插件管理方法  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  如何快速登录WAP自助建站平台?  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  音乐网站服务器如何优化API响应速度?  Laravel如何使用Gate和Policy进行授权?(权限控制)  美食网站链接制作教程视频,哪个教做美食的网站比较专业点?  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  JavaScript如何实现类型判断_typeof和instanceof有什么区别  Laravel怎么清理缓存_Laravel optimize clear命令详解  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  bing浏览器学术搜索入口_bing学术文献检索地址  如何在宝塔面板中创建新站点?  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  高性能网站服务器配置指南:安全稳定与高效建站核心方案  魔毅自助建站系统:模板定制与SEO优化一键生成指南  如何在万网自助建站中设置域名及备案?  东莞市网站制作公司有哪些,东莞找工作用什么网站好?  如何用虚拟主机快速搭建网站?详细步骤解析  如何快速使用云服务器搭建个人网站?  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  如何在万网ECS上快速搭建专属网站?  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  如何选择PHP开源工具快速搭建网站?  微信小程序 require机制详解及实例代码  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  Python3.6正式版新特性预览  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  图册素材网站设计制作软件,图册的导出方式有几种?  详解vue.js组件化开发实践  Laravel如何处理文件下载请求?(Response示例)  如何在万网利用已有域名快速建站?  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  高性能网站服务器部署指南:稳定运行与安全配置优化方案