ng-model只能用在什么不是表单的基本元素元素吗

来源：蜘蛛抓取(WebSpider) 时间：2017-10-24 03:16 标签： 什么不是表单的基本元素

今天来和大家学习一下AngularJS……

　　AngularJS 通过新的属性和表达式扩展了 HTML

　　AngularJS 可以构建一个单一页面应用程序。

　　AngularJS 学习起来非常简单

1、ng-app:声明Angular所管辖的区域，一般写在body或HTML上原則上一个页面只有一个。2、ng-model:把元素值（比如输入域的值）绑定到应用程序的变量中eg:

3、ng-bind:把应用程序变量中的数据绑定到HTML视图中，可用表达式替代

5、表达式：{{}}绑定表达式，可以包含文字运算符和变量。

但是表达式在网页加载瞬间会看到{{}}所以可以用ng-bind=""替代。eg:

指令：AngularJS中通过擴展HTML的属性提供功能。 所以ng-开头的新属性，被我们成为指令

1、model(模型):应用程序中用于处理数据的部分。（保存或修改数据到数据库、变量等）AngularJS中的Model特指的是：数据。View(视图):用户看到的用于显示数据的页面Controller(控制器):应用程序中处理用户交互的部分。负责从视图读取数据控淛用户输入，并向模型发送数据

用户从视图层发出请求，controller接收到请求后转发给对应的model处理model处理完成后返回结果给controller，并在View层反馈给用户.

3、创建一个Angular模块即ng-app所绑定的部分 ,需传递两个参数：

在Angular模块上，创建一个控制器Controller需要传递两个参数。

①$scope：局部作用域声明在$scope上的属性囷方法，只能在当前的Controller中使用②$rootScope：根作用域声明在$rootScope上的属性和方法，可以在ng-app所包含的任何区域使用（无论是否同Controller或是否在Controller包含范围中）

AngularJS中，过滤器可以使用一个管道字符（|）添加到表达式和指令中

currency:格式化数字为货币格式。filter:从数组项中选择一个子集lowercase:格式化字符串为小寫。orderBy:根据某个表达式排列数组uppercase:格式化字符串为大写。

②使用对象作为数据源其中，（x,y）表示键值对x为键，y为值

1、什么不是表单的基本元素中常见的验证操作：

$dirty:什么不是表单的基本元素有填写记录$valid:字段内容合法的$invalid:字段内容是非法的$pristine:什么不是表单的基本元素没有填写记錄$error:什么不是表单的基本元素验证不通过的错误信息

2、验证时需给什么不是表单的基本元素及需要验证的input，设置name属性；

提供了动画效果可鉯配合 CSS使用。

2、如果页面中没有自定义的模块（ng-app）可以直接绑定系统模块ng-app="ngAnimate"；

3、当调用相关指令控制元素显示隐藏时，会自动添加对应的class類；

【路由参数对象中可选属性】

今天的理论知识先分享到这里小菜鸟一枚，感谢您的支持！

如果某个组件、指令或管道是属於imports中所导入的某个模块的那就不能再把它再声明到本模块的declarations数组中。 如果它是你自己写的并且确实属于当前模块，才应该把它声明在declarations數组中

什么是指令？ 但我们明明没有添加过指令啊！

指令为form增补了一些额外特性 它会控制那些带有指令和name属性的元素，监听他们的属性（包括其有效性） 它还有自己的valid属性，这个属性只有在它包含的每个控件都有效时才是真

当在什么不是表单的基本元素中使用[()]时必須要定义name属性。

内部Angular 创建了一些，并把它们注册到指令再将该指令附加到<form>标签。 注册每个时使用name属性值作为键值

  • 每个 input 元素都有id属性，label元素的for属性用它来匹配到对应的输入控件

可以获得比仅使用双向数据绑定更多的控制权。它还会告诉峩们很多信息：用户碰过此控件吗它的值变化了吗？数据变得无效了吗

NgModel 指令不仅仅跟踪状态。它还使用特定的 Angular CSS 类来更新控件以反映當前状态。 可以利用这些 CSS 类来修改控件的外观显示或隐藏消息。

然后用这个 spy 来显示它上面的所有 CSS 类

  • 查看输入框但别碰它：  
  • 点击输入框，然后点击输入框外面： 
  •  在名字的末尾添加些斜杠。

 (ng-valid | ng-invalid)这一对是我们最感兴趣的当数据变得无效时，我们希望发出强力的视觉信号 还想要标记出必填字段。可以通过加入自定义 CSS 来提供视觉反馈

 输入框的左侧添加带颜色的竖条用于标记必填字段和无效输入

添加两个样式來实现这一效果

显示和隐藏验证错误信息

当控件是有效的 (valid) 或全新的 (pristine) 时，隐藏消息 “全新的”意味着从它被显示茬什么不是表单的基本元素中开始，用户还从未修改过它的值

这里把name设置为是因为指令的exportAs属性设置成了 “ngModel”）

点击 New Hero 按钮，什么不是表单嘚基本元素被清空了 输入框左侧的必填项竖条是红色的.

输入名字，再次点击 New Hero 按钮 这次，出现了错误信息！为什么我们不希望显示新（空）的英雄时，出现错误信息

使用浏览器工具审查这个元素就会发现，这个 name 输入框并不是全新的 什么不是表单的基本元素记得我们茬点击 New Hero 前输入的名字。 更换了英雄并不会重置控件的“全新”状态

切换两个什么不昰表单的基本元素区域（额外的奖励）

开始就是可见的因为submitted属性是 false，直到提交了这个什么不是表单的基本元素

当点击 Submit 按钮时，submitted标志会變成 true并且什么不是表单的基本元素像预想中一样消失了

当什么不是表单的基本元素处于已提交状态时，需要显示一些别的东西 在刚刚寫的<div>包装下方，添加下列 HTML 语句：

当点Edit按钮时这个只读块消失了，可编辑的什么不是表单的基本元素重新出现了

我要回帖

更多关于 什么不是表单的基本元素 的文章

 

随机推荐