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

最新推荐文章于 2018-06-26 18:18:04 发布

xuht_nb

最新推荐文章于 2018-06-26 18:18:04 发布

阅读量1k

点赞数

分类专栏： AngularJS 文章标签： AngularJS JS

本文链接：https://blog.csdn.net/bruce_hz/article/details/39226683

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

xuht_nb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS基础一(指令,表达式)

AngularJS 通过(ng-directives指令)扩展了HTML,且通过(表达式)绑定数据到HTMLng-app 指令定义一个 AngularJS 应用程序。ng-model 指令把元素值(比如输入域的值)绑定到应用程序。为应用程序数据提供类型验证(number、email、required)。为应用程序数据提供状态(invalid、dirty、touc
复制链接

扫一扫