2016年3月24日

angularjs

  • ng-model 指令

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

提示信息会在 ng-show 属性返回 true 的情况下显示。

应用状态 ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

ng-model 指令根据表单域的状态添加/移除以下类：

  • ng-empty

    • 值为空

  • ng-not-empty

    • 值不为空

  • ng-touched

    • 控件已失去焦点

  • ng-untouched

    • 控件未失去焦点

  • ng-valid

    • 有效值

  • ng-invalid

    • 无效值

  • ng-dirty

    • 值改变

  • ng-pending

    • 任何为满足$asyncValidators的情况

  • ng-pristine

    • 控件为初始状态

AngularJS 应用组成

  • View(视图), 即 HTML。

  • Model(模型), 当前视图中可用的数据。

  • Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

过滤器

过滤器

描述

currency

格式化数字为货币格式。

filter

从数组项中选择一个子集。

lowercase

格式化字符串为小写。

orderBy

根据某个表达式排列数组。

uppercase

格式化字符串为大写。

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

uppercase过滤器将字符串格式化为大写：

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。 filter 过滤器从数组中选择一个子集：

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>
Previous2016年3月23日Next2016年3月25日

Last updated

Was this helpful?