`

AngularJS的select设置默认值

 
阅读更多
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时则默认是会议



  • 大小: 4 KB
分享到：
| AngularJS实现文件异步上传
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

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

    在标题提到的“AngularJS select设置默认值的实现方法”中，我们将深入探讨如何完成这一操作。 首先，我们需要理解`ng-model`和`ng-options`这两个指令的作用。`ng-model`用于双向数据绑定，将视图（UI）中的值与...

    AngularJS select加载数据选中默认值的方法

    AngularJS中的select组件是一种常用的下拉选择框，用于从一系列选项中选择一个或多个值。...通过以上方法，可以有效解决在AngularJS中select组件加载数据和设置默认值的问题，从而提高Web应用的用户体验和交互效率。

    angularjs的select使用及默认选中设置

    我最近在研究angularjs学习的道路上，那么今天也算个学习笔记吧！ 1 ng-model=”standardCourse.showHours”代替name 2 ng-selected = “1”代替selected=”selected”,但问题是select下会多出一个无用的option 3 ...

    angular select 默认值设置方法

    本文将详细探讨如何在AngularJS中为`select`元素设置默认值。 首先，让我们分析给定的代码片段： ```html &lt;select ng-model="selected" ng-options="x.id as x.name for x in users"&gt;&lt;/select&gt; ``` 这里的`ng-...

    详解使用angularjs的ng-options时如何设置默认值(初始值)

    在使用AngularJS框架进行Web开发时，ng-options指令是一个非常有用的工具，它能够帮助我们以一种简单的方式生成下拉列表（select元素）。ng-options可以让我们更方便地将一个对象数组绑定到select元素上，并且可以...

    Angular2中select用法之设置默认值与事件详解

    这篇文章主要讨论了如何在Angular2中设置`select`的默认值以及如何处理与`select`相关的事件。 首先，我们来看一下如何设置`select`的默认值。在Angular2中，你可以使用双向数据绑定`[(ngModel)]`来实现这一目标。...

    angularjs select 赋值 ng-options配置方法

    AngularJS中，select元素的赋值和ng-options配置方法主要用于在下拉选择框中展示一系列选项，并将选中的值绑定到一个模型上。ng-options指令提供了一种更加优雅的方式来处理select元素的选项数据绑定，它可以帮助...

    AngularJS实现select的ng-options功能示例

    此外，`&lt;select&gt;`还有一个预定义的空选项（`选择主题分类&lt;/option&gt;`），这提供了一个默认值，让用户必须做出选择。 整体而言，这个示例展示了如何使用AngularJS的`ng-options`指令动态地创建一个下拉列表，并将用户...

    angularjs下拉框空白的解决办法

    在AngularJS开发中，下拉框（`&lt;select&gt;`元素）有时会出现空白问题，这通常是由于框架自身的一些机制导致的。在本问题中，我们关注的是如何解决AngularJS下拉框初始化时显示为空白的情况。这个问题通常出现在使用`ng-...

    editable-select:AngularJS plunin 是一个基于acute-select的可编辑选择组件，你可以输入或选择值

    "AngularJS plugin" 指出它是 AngularJS 框架的一部分，而 "基于 acute-select" 表明它是基于另一个名为 "acute-select" 的库或组件进行开发的。 **描述详解：** 描述中提到，"可编辑选择" 是该插件的核心特性，...

    AngularJS表单编辑提交功能实例

    AngularJS通过内置的ng-model指令将表单输入域（如input、select等）与模型（通常是一个JavaScript对象）绑定。通过这种方式，可以在视图和模型之间保持同步，即视图的变化会反映到模型上，反之亦然。 在本文中，...

    Angular中ng-options下拉数据默认值的设定方法

    在AngularJS中，`ng-options`指令用于在`&lt;select&gt;`元素中动态生成选项，它提供了灵活的方式来绑定数据模型到下拉列表。...希望这篇文章能帮助你更好地理解和应用AngularJS中的`ng-options`指令来设置下拉列表的默认值。

    angular-chosen:这个项目展示了 AngularJS 和 Chosen 插件的集成

    这意味着用户在打开表单时，某些选项可以预先被选中，这在处理默认值或根据用户数据初始化表单时非常有用。"2014-09-10 更新到最新选择和角度并添加清除选择的能力"则意味着项目保持了对最新版本的Chosen和AngularJS...

    前端项目-flagstrap.zip

    此外，"flagstrap"还提供了多种自定义选项，如改变国旗尺寸、设置默认值、添加回调函数等，使得它能够灵活适应各种项目需求。在实际应用中，开发者可以根据项目特性进行适当的调整，以达到最佳效果。 总的来说，...

Magicbox
Global site tag (gtag.js) - Google Analytics