AngularJS基础一(指令,表达式)

来源：互联网发布：兄弟连java基础视频编辑：程序博客网时间：2024/05/17 07:41

AngularJS 通过(ng-directives指令)扩展了HTML,且通过(表达式)绑定数据到HTML

ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
   为应用程序数据提供类型验证(number、email、required)。
   为应用程序数据提供状态(invalid、dirty、touched、error)。
   为 HTML 元素提供 CSS 类。
   绑定 HTML 元素到 HTML 表单
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-init 指令初始化 AngularJS 应用程序变量.
ng-repeat 指令会重复一个 HTML 元素
---HTML5 允许扩展的(自制的)属性,以 data- 开头。AngularJS 属性以 ng- 开头,
   但是您可以使用 data-ng- 来让网页对 HTML5 有效

<span style="font-size:18px;"><!doctype html><html ng-app><head>    <link href="./bootstrap.min.css" rel="stylesheet" type="text/css"/>    <script src="./angular.min.js"></script>    <script type="text/javascript">    </script></head><body><!-- 对象表达式person={firstName:'John',lastName:'Doe'} --><!-- 数组表达式points:[1,15,19,2,40] -->    <div ng-init="person={firstName:'John',lastName:'Don',        points:[{a:1},{a:2},{a:3}]}">        <p>在输入框中尝试输入：</p>        <p>姓名：<input type="text" ng-model="name"></p>        <p ng-bind="name"></p>        <!-- 等价于{{}} -->        <p>{{name}}</p>        <p ng-bind="person.lastName"></p>        <p>{{person.points[2].a}}</p>        <ul>            <li ng-repeat="x in person.points">                {{ x.a }}            </li>        </ul>    </div></body></html></span>

0 0