【AngularJS】—— 2 初识AngularJs(续)

前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容。

  本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括:

  1 事件

  2 模块

  3 表单

  4 数据验证

  5 bootstrap CSS风格

  6 include包含其他页面

  7 应用程序

  8 参考手册

  

  首先看一下html的事件

  关于html的事件,文中给出了三个例子,点击、隐藏、显示。使用方法基本相同:

  先看一下点击的例子,点击按钮后,会触发ng-click内的方法,进行累计加一:

<div ng-app="" ng-controller="myController">
<button ng-click="count = count + 1">点我!</button>
<p>{{ count }}</p>
</div>

  对于ng-hide和ng-show原理相同,都是指定一个bool值,true或false。

  初始的时候myVar的值为false,因此并不隐藏,每次点击myVar都会改变为相反的值,达到现实隐藏的效果。

<div ng-app="" ng-controller="personController"><button ng-click="toggle()">隐藏/显示</button><p ng-hide="myVar">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</p></div><script>
function personController($scope) {$scope.person = {firstName: "John",lastName: "Doe"};$scope.myVar = false;$scope.toggle = function() {$scope.myVar = !$scope.myVar;};
}
</script>

  ng-show使用方法也相同

<div ng-app="" ng-controller="personController"><button ng-click="toggle()">隐藏/显示</button><p ng-show="myVar">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</p></div><script>
function personController($scope) {$scope.person = {firstName: "John",lastName: "Doe"};$scope.myVar = true;$scope.toggle = function() {$scope.myVar = !$scope.myVar;};
}
</script>

 

  关于AngularJS的模块

  模块定义了用户的应用,所有的控制器属于一个模块。之前使用的ng-app就是模块的定义。

  例如下面的代码,定义了一个应用程序的模块myApp,并定义了一个控制器myCtrl:

<body><div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div><script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script><script src="myApp.js"></script>
<script src="myCtrl.js"></script></body>

  对于控制器,也可以通过模块来定义声明:

<head>
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
</head><body><div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div><script>
var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) {$scope.firstName = "John";$scope.lastName = "Doe";
});
</script></body>

  不过要提前加载angularjs的脚本,这样再script中 angular.module才可以使用。或者在这句话的前面加载js。

 

  关于AngularJS表单

  表单是web中重要的组成部分,如下面样例所示,可以很方便的获取到form中的数据

<div ng-app="" ng-controller="formController"><form novalidate>First Name:<br><input type="text" ng-model="user.firstName"><br>Last Name:<br><input type="text" ng-model="user.lastName"><br><br><button ng-click="reset()">RESET</button></form><p>form = {{user}}</p><p>master = {{master}}</p>
</div><script>
function formController ($scope) {$scope.master = {firstName: "John", lastName: "Doe"};$scope.reset = function() {$scope.user = angular.copy($scope.master);};$scope.reset();
};
</script>

 

  关于验证

  AngularJS提供了很多验证机制,例如邮箱等。

<!DOCTYPE html>
<html> <body>
<h2>Validation Example</h2><form  ng-app=""  ng-controller="validateCtrl"
name="myForm" novalidate><p>Username:<br><input type="text" name="user" ng-model="user" required><span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"><span ng-show="myForm.user.$error.required">Username is required.</span></span>
</p><p>Email:<br><input type="email" name="email" ng-model="email" required><span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"><span ng-show="myForm.email.$error.required">Email is required.</span><span ng-show="myForm.email.$error.email">Invalid email address.</span></span>
</p><p><input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||myForm.email.$dirty && myForm.email.$invalid">
</p></form><script src="//apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script>
function validateCtrl($scope) {$scope.user = 'John Doe';$scope.email = 'john.doe@gmail.com';
}
</script></body>
</html>

  可以通过.$dirty   .$invalid来验证。

 

  添加bootstrap样式

  可以首先加载bootstrap css文件

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

  样例代码参考:

<!DOCTYPE html>
<html ang-app="">
<head>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
</head><body ng-controller="userController">
<div class="container"><h3>Users</h3><table class="table table-striped"><thead><tr><th>Edit</th><th>First Name</th><th>Last Name</th></tr></thead><tbody><tr ng-repeat="user in users"><td><button class="btn" ng-click="editUser(user.id)"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit</button></td><td>{{ user.fName }}</td><td>{{ user.lName }}</td></tr></tbody>
</table><hr>
<button class="btn btn-success" ng-click="editUser('new')"><span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr><h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3><form class="form-horizontal">
<div class="form-group"><label class="col-sm-2 control-label">First Name:</label><div class="col-sm-10"><input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name"></div>
</div> 
<div class="form-group"><label class="col-sm-2 control-label">Last Name:</label><div class="col-sm-10"><input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name"></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Password:</label><div class="col-sm-10"><input type="password" ng-model="passw1" placeholder="Password"></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Repeat:</label><div class="col-sm-10"><input type="password" ng-model="passw2" placeholder="Repeat Password"></div>
</div>
</form><hr>
<button class="btn btn-success" ng-disabled="error || incomplete"><span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div><script src = "http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script src = "myUsers.js"></script>
</body>
</html>
View Code

 

  关于include包含其他html

  可以通过ng-include来包含其他的web页面:

<body>
<div class="container"><div ng-include="'myUsers_List.htm'"></div><div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>

 

  关于应用程序

  创建AngularJS应用程序

<div ng-app="myTodoApp" ng-controller="myTodoCtrl"><h2>我的笔记</h2><p><textarea ng-model="message" cols="40" rows="10"></textarea></p><p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p><p>剩下的字符数:<span ng-bind="left()"></span></p></div><script src="myTodoApp.js"></script>
<script src="myTodoCtrl.js"></script>

 

  最后是Angular的指定 过滤器参考

  ng_app 定义应用程序

  ng_bind 绑定数据

  ng_click 定义元素单击行为

  ng_controller 定义控制器对象

  ng_disabled 定义html标签可用

  ng_init 初始化数据

  ng_model 绑定应用程序数据

  ng_repeat 实现循环

  ng_show 显示html标签

 

  currency 转换成货币

  filter 从数组中选择一个子集

  lowercase 格式化字符串为小写

  uppercase 格式化字符串为大写

  orderBy 排序

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/289793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

特斯拉为何使用.NET 技术栈?

【精选转载】| 来源/知乎在知乎上有一个帖子非常热闹&#xff1a;“为何特使拉使用.net core技术栈 而不用 java&#xff1f;”1回答1&#xff1a;Kasim作者&#xff1a;Kasim链接&#xff1a;https://www.zhihu.com/question/496204534/answer/2269157872这题我熟啊&#xff0…

Blazor University (6)组件 — 组件事件

原文链接&#xff1a;https://blazor-university.com/components/component-events/组件事件源代码[1]EventCallback<T> 类是一个特殊的 Blazor 类&#xff0c;可以作为参数公开&#xff0c;以便组件可以在发生感兴趣的事情时轻松通知使用者。一旦声明了 EventCallback&l…

Xamarin效果第十四篇之玩耍GIS

最近再次拾起Xamarin然后也实现了祖传PLC控制和弹窗配置;这不又一次勾起来我想基于他玩玩原来一直玩耍的GIS,毕竟咱前面一直玩耍二维和三维的GIS相关的知识点;有兴趣的小伙伴可以翻翻我的历史文章;趁着激情满满;来看看最终咱实现的加载高德平面地图效果(有水印):再者就是满足群…

PHP进程退出信号_一文吃透 PHP 进程信号处理

背景前两周老大给安排了一个任务&#xff0c;写一个监听信号的包。因为我司的项目是运行在容器里边的&#xff0c;每次上线&#xff0c;需要重新打包镜像&#xff0c;然后启动。在重新打包之前&#xff0c;Dokcer会先给容器发送一个信号&#xff0c;然后等待一段超时时间(默认1…

GitHub Copilot 现已登陆 Visual Studio!

激动人心的好消息来了&#xff0c;GitHub 在3月29日发布博客&#xff0c;宣布 Github Copilot 现在可以在 Visual Studio 中使用。我们知道 Visual Studio 的 IntelliCode 本身已经很智能了, 现在又迎来了 Copilot, 编程体验将进入新的篇章。如何安装? 首先&#xff0c;您…

iOS 9音频应用播放音频之音量设置与声道设置

iOS 9音频应用播放音频之音量设置与声道设置 iOS 9音频应用音量设置 音量又称响度、音强&#xff0c;是指人耳对所听到的声音大小强弱的主观感受&#xff0c;其客观评价尺度是声音的振幅大小。在iOS 9音频应用的应用中&#xff0c;经常会出现播放的音乐音量过大或者过小。此时i…

php fpm工作原理,什么是phpfpm的工作原理?

什么是phpfpm的工作原理&#xff1f;发布时间&#xff1a;2020-07-13 15:12:53来源&#xff1a;亿速云阅读&#xff1a;181作者&#xff1a;Leah什么是phpfpm的工作原理&#xff1f;针对这个问题&#xff0c;这篇文章详细介绍了相对应的分析和解答&#xff0c;希望可以帮助更多…

C#对象映射器之Mapster

简介Mapster是一个快&#xff0c;小巧&#xff0c;功能强大的对象映射.Net框架例子我有两个Model类且他们的属性一致&#xff0c;我们将 SourceObjectTest赋值给DestObjectTest该怎么做&#xff1f;SourceObjectTest sourceObject new SourceObjectTest(); sourceObject.Name …

如何关闭Struts2的webconsole.html

出于安全目的&#xff0c;在禁用了devMode之后&#xff0c;仍然不希望其他人员看到webconsole.html页面&#xff0c;则可以直接删除webconsole.html 的源文件&#xff0c; 它的位置存在于&#xff1a; 我们手工删除 struts2-core-*.jar\org\apache\struts2\interceptor\debuggi…

UIView 的基础

UIView•什么是控件&#xff1f;-屏幕上的所有UI元素都叫做控件&#xff0c;也有人叫做视图、组件-按钮&#xff08;UIButton&#xff09;、文本&#xff08;UILabel&#xff09;都是控件•控件的共同属性有哪些&#xff1f;-尺寸-位置-背景色-......-•苹果将控件的共同属性都…

JS

为什么80%的码农都做不了架构师&#xff1f;>>> function getQueryString(name) {var reg new RegExp("(^|&)" name "([^&]*)(&|$)"),r window.location.search.substr(1).match(reg);if(r ! null) {return unescape(r[2]); }r…

ssh公钥免密码登录

2019独角兽企业重金招聘Python工程师标准>>> ssh 无密码登录要使用公钥与私钥。linux下可以用用ssh-keygen生成公钥/私钥对&#xff0c;下面我以CentOS为例。 有机器A(192.168.1.155)&#xff0c;B(192.168.1.181)。现想A通过ssh免密码登录到B。 首先以root账户登陆…

Spring4Shell的漏洞原理分析

Spring框架最新的PoC这两天出来的一个RCE漏洞&#xff0c;但是有以下的条件限制才行&#xff1a;必须是jdk9及以上必须是部署在tomcat的应用是springmvc的或者webflux的应用具体的可以查看spring官方&#xff1a;https://spring.io/blog/2022/03/31/spring-framework-rce-early…

php 点对点,浅析点对点(End-to-End)的场景文字识别

一、背景随着智能手机的广泛普及和移动互联网的迅速发展&#xff0c;通过手机等移动终端的摄像头获取、检索和分享资讯已经逐步成为一种生活方式。基于摄像头的(Camera-based)的应用更加强调对拍摄场景的理解。通常&#xff0c;在文字和其他物体并存的场景&#xff0c;用户往往…

【ArcGIS遇上Python】Python实现Modis NDVI批量化月最大合成

「 刘一哥GIS」CSDN专业技术博文专栏目录索引https://geostorm.blog.csdn.net/article/details/113732454 最大合成法(MVC)可以在Envi中的Band Math中进行,式子是B1>B2,但是无法批量化;本文实现在ArcGIS中利用Python代码批量进行,如下: 用到的Modis NDVI数据是在MRT…

cad2016中选择全图字体怎么操作_打开CAD图纸字体丢失、重新选择怎么办?这样设置,一辈子用的到...

AutoCAD图纸本身就有着比较特殊的个性&#xff0c;难编辑难打开&#xff0c;时不时的还会来个乱码、字体缺失&#xff0c;甚至有的时候还提示我们进行字体的重新选择&#xff0c;应该怎么解决呢&#xff1f;虽然是个很经常遇见的问题&#xff0c;很多的小伙伴还是不知道如何解决…

MassTransit - .NET Core 的分布式应用程序框架

简介MassTransit 是一个免费的、开源的.NET 分布式应用程序框架。MassTransit 使创建应用程序和服务变得容易&#xff0c;这些应用程序和服务利用基于消息的松散耦合异步通信来实现更高的可用性、可靠性和可扩展性特点•易于使用和理解的 API&#xff0c;让您专注于解决业务问题…

mongo学习笔记(二):聚合,游标

一、聚合 <1> Count 1.db.person.count() 2.db.person.count({"age":20}) <2> Distinct db.person.distinct("age")//指定了谁&#xff0c;谁就不能重复 <3> Group key&#xff1a;这个就是分组的key&#xff0c;我们这里是对年龄分组。…

Java实验二猜数字游戏,JAVA-第2周实验-猜数字游戏

JAVA--第2周实验--猜数字游戏/* (程序头部注释开始)* 程序的版权和版本声明部分* Copyright (c) 2011, 烟台大学计算机学院学生* All rights reserved.* 文件名称&#xff1a;猜数字游戏* 作 者&#xff1a; 雷恒鑫* 完成日期&#xff1a; 2012 年 09 月 07 日* 版 本 号&#…

Xamarin效果第十五篇之自定义CheckBox

在上一篇中使用Xamarin玩耍了GIS加载高德和百度;这不这两天又抽空完善了一下;自定义了一下CheckBox;来看看最终效果:关于实现咱就是直接自定义ContentView:后台无非就是一堆的依赖属性(和WPF真像):后台定义的Command为了支持选中状态:‍再来看看具体使用:<CustomViews:Image…