angular入门几段代码（二）

最新推荐文章于 2024-07-16 17:39:09 发布
最新推荐文章于 2024-07-16 17:39:09 发布
阅读量4.5k 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36580691/article/details/88773809
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		<select ng-options="v.value as v.name for v in arr" ng-model="city">
			<option value="">请选择人员</option>
		</select>
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
		$scope.city = '南昌';
		$scope.arr = [
			{name:'lalala', value:'南京'},
			{name:'xk', value:'南昌'},
			{name:'hh', value:'南方'},
		];
	}]);
</script>
</body>
</html>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
		var obj = {'name':'lalala'};
		angular.extend(obj, {'age':55, 'gender':'m'});//对象扩充
		
		var arr = [
			{name:'xk', age:55},
			{name:'lalala', age:85},
			{name:'hh', age:20}
		];
		angular.forEach(arr, function(v, k){//foreach循环
			console.log(v)
			console.log(k)
			angular.forEach(v, function(value, key){//遍历对象
				console.log(value);
			});
		});

		//angular.copy()//深拷贝
		$scope.data = {'name':'lalala'};//json格式数据
		localStorage.setItem('data', angular.toJson($scope.data));//json对象转换成字符串
		angular.fromJson(localStorage.getItem('data'));//将字符串转换成json对象
		angular.fromJson('{"name":"lalala"}');

	}]);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		<label><input type="checkbox" ng-model="status">接受协议</label>
		<button ng-init="copyright=false" ng-click="copyright=!copyright">查看协议</button><br/>
		<textarea ng-if="copyright">这个协议是......</textarea><br/>
		<button ng-disabled="!status">登录</button>
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
	}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		<ul>
			<li ng-repeat="(key, value) in data" style="{{$odd?'color:red;':''}}">
				姓名：{{value.name}} 年龄：{{value.ag}}
			</li>
		</ul>
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
		$scope.data = [
				{name:'lalala',"age":55},
				{name:'xk',"age":44},
				{name:'hh',"age":22},
			];
		}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		性别：<select ng-model="user.gender">
			<option value="">请选择性别</option>
			<option ng-value="1" ng-selected="user.gender==1">男</option>
			<option ng-value="2" ng-selected="user.gender==2">女</option>
		</select>
		<input type="radio" ng-model="user.gender" ng-value="1">男
		<input type="radio" ng-model="user.gender" ng-value="2">女<br/>

		<input type="checkbox" ng-model="copyright">
		<input type="submit" ng-disabled="!copyright">

		<input type="text" name="a" readonly="readonly" value="1"><!--readonly可以提交到后台-->
		<input type="text" name="b" disabled="disabled" value="2"><!--disabled不能提交到后台-->
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
		$scope.user = {'gender':2}
	}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		<input type="checkbox" ng-model="chekc">
		<span ng-bind="!chekc?'全选':'取消'"></span><br/>
		<input type="checkbox" ng-checked="chekc"><br/>
		<input type="checkbox" ng-checked="chekc"><br/>
		<input type="checkbox" ng-checked="chekc"><br/>
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
	}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		<input type="text" ng-model="title" ng-model-options="{updateOn:'default blur', debounce:{default:1000,blur:0}}">
		{{title}}
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
	}]);
</script>
</body>
</html>

 

小菜鸡__
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Angular入门教材及示例代码
05-25
**Angular入门教材及示例代码** Angular是一款由Google维护的开源JavaScript框架，主要用于构建单页应用程序（SPA）。它提供了一套完整的解决方案，包括数据绑定、依赖注入、路由、模块化和许多其他特性，使得开发...
Angular 5代码片段和VS Code提升您的工作流程
05-24 139
在本文中，我们将重点介绍如何在Visual Studio Code中使用Angular 5代码片段来改善工作流程。 我们首先从使用和创建代码片段的基础开始。 我们将研究如何在Angular项目中将Angular 代码片段用于VS Code 。 然后，我们稍后将看我们如何创建自己的代码片段并与他人共享。 对于精通编程语言的任何人，您都知道一次又一次地键入相同的代码是多么无聊。 您最终开始复制和...
常用AngularJs代码段
weixin_34163553的博客
04-05 87
一，ng-repeat/filter/orderby使用 数据结构： { "result":true, "ItemWeekIndex":"第二周", "Content":[ { "weekIndex":1, "courseInfo":"11教501高等数...
angular之入门基础
梦想成为全栈的切图仔
10-12 1853
2，angular 是由谷歌开发的框架，奇特点是对于DOM的操作变的更加的简介；代码量大大的降低了，对数据的操作变的更加的灵活（通过控制数据的变化，间接的控制了DOM节点。脏检查（一旦某一个数据发生变化，angular就会在第一时间检测到这个元素，angular一直在实时检查中），angular的模块化也让开发变的更加的方便简洁）；（2）要配置angular路由，必须要引入angular路由的js文件，而且这个文件必须和当前引入的angular。值为true的时候为降序，false的时候为升序。
Angular快速入门
東三城的博客
03-04 8699
Angular,Angular CLI,模块,组件,模板(插值语法,属性绑定,条件判断,循环语句,事件绑定,双向绑定,模板引用变量,表单控件,表单控件分组,表单验证,自定义表单验证,管道),服务,依赖注入,路由
angular 4 入门实战代码
01-22
在Angular 4入门实战代码中，你将学习到如何利用这个强大的框架来开发股票网站。Angular 4相较于之前的版本，在性能、模块化和打包大小等方面有了显著提升，使得开发者能更轻松地构建复杂的Web应用。 首先，了解...
浅谈Angular HttpClient简单入门
08-27
Angular HttpClient 简单入门 Angular HttpClient 是 Angular 框架中的一种 HTTP 客户端实现，提供了简化的 API 来实现 HTTP 客户端功能。下面是 Angular HttpClient 的简单入门教程。 一、准备工作 在使用 ...
Angular入门教程1
08-08
**Angular入门教程1** 在开始Angular的开发之旅之前，我们需要先搭建好开发环境。本文将指导您完成必要的准备工作，包括安装Node.js、TypeScript以及Angular CLI，并提供学习资源和项目实战指南。 ### 1. 搭建环境...
curso-angular:Angular JS入门课程代码
07-05
《Angular JS入门课程代码详解》 AngularJS，作为一款由Google维护的JavaScript框架，自诞生以来就备受开发者青睐。它极大地简化了Web应用的开发，尤其是对于构建动态单页应用程序（SPA）。本篇文章将深入探讨在...
angular入门几段代码（一）
qq_36580691的博客
03-23 194
<!DOCTYPE html> <html> <head> <script src="../angular/angular1.4.6.min.js"></script> <title></title> </head> <body> <!--这里的ng-app标识模块，跟下...
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 369
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 717
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
更新商品前端接口编写
weixin_55639995的博客
07-12 399
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
微信小程序开发笔记之”表单读不出数据“解决指南
qq_46396470的博客
07-12 328
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 314
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
【零基础】学JS之APIS第三天
大学生小郑的博客
07-12 1705
【零基础】学JS之APIS第三天
＜Rust＞＜GUI＞rust语言GUI库tauri体验：前、后端结合创建一个窗口并修改其样式
用沸腾的热血，支付我们的人生吧！
07-16 819
前言 本文是rust语言下的GUI库：tauri来创建一个窗口的简单演示，主要说明一下，使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等，所以，这也是一个专栏，将包括tauri库的多个方面。 环境配置 系统：windows 平台：visual studio code 语言：rust、javascript、html、css 库：tauri概述 本文是tauri库系列博文的第一篇，主要是简单实现一个窗口程序并成功运行，当然，这是基于官方的示例，事实上官方给出的上手例程非常详细，不
【Web前端技术 01】 探索HTML5的奥秘：为初学者打造网页的基石
最新发布
Wc&Yd博客
07-16 576
探索HTML5奥秘，本文带初学者迈入网页设计大门。详解HTML5文档结构、语义化标签、新增API，助您构建现代网页，激发学习兴趣，开启开发之旅。
angular入门教程
07-22
如果你是初学者，以下是一个简单的 Angular 入门教程，帮助你开始学习 Angular： 1. 安装 Angular CLI：首先，你需要安装 Node.js 和 npm（Node 包管理器）。然后，使用 npm 安装 Angular CLI。在命令行中运行以下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值