编程 Javascript

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

Posted in Javascript onAugust 25, 2017

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设置默认值的实现方法

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

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

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Add a Formatted Table to a Word Document

Jun 15 Javascript

Firefox中beforeunload事件的实现缺陷浅析

May 03 Javascript

js+xml生成级联下拉框代码

Jul 24 Javascript

js+JQuery返回顶部功能如何实现

Dec 03 Javascript

Jquery插件easyUi表单验证提交(示例代码)

Dec 30 Javascript

jQuery页面元素动态添加后绑定事件丢失方法,非 live

Jun 16 Javascript

聊一聊JS中this的指向问题

Jun 17 Javascript

ExtJs异步无法向外传值和赋值的完美解决办法

Jun 14 Javascript

微信小程序新手教程之启动页的重要性

Mar 03 Javascript

微信小程序如何再次获取用户授权的方法

May 10 Javascript

微信小程序商品详情页底部弹出框

Nov 22 Javascript

vue 通过 Prop 向子组件传递数据的实现方法

Oct 30 Javascript

AngularJS 中ui-view传参的实例详解

Aug 25 #Javascript

node跨域请求方法小结

Aug 25 #Javascript

AngularJS中filter的使用实例详解

Aug 25 #Javascript

微信小程序实现表单校验功能

Mar 30 #Javascript

Angularjs中ng-repeat的简单实例

Aug 25 #Javascript

微信小程序页面滑动屏幕加载数据效果

Nov 16 #Javascript

Angularjs中数据绑定的实例详解

Aug 25 #Javascript