• AngularJS简单例子


    双大括号标记{{}}绑定的表达式

    <html ng-app>

    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    最后,标签中的正文是应用的模板,在UI中显示我们的问候语:

    Hello {{'World'}}!

    结果:结果直接输出World

    AngularJS双向数据绑定

    <!doctype html>

    <html ng-app>

        <head>

            <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

        </head>

        <body>

            Your name: <input type="text" ng-model="yourname" placeholder="World">

            <hr>

            Hello {{yourname || 'World'}}!

        </body>

    </html>

    {{yourname || 'World'}}!中的yourname将根据ng-model的值动态的改变,如果ng-model为空,则仅仅输出World

    语法或指令

    Ng-Bing, ng-init

    <body ng-app>

          <b ng-init="name='crd'"></b>

          <div ng-bind="name">dsdfdsf</div>

      </body>

    Div的值将输出crd 原值dsdfdsf被覆盖

    HTML5 允许扩展的(自制的)属性,以 data- 开头。

    AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

    带有有效的 HTML5:

    AngularJS 实例

    <div data-ng-app="" data-ng-init="firstName='John'">

    <p>姓名为 <span data-ng-bind="firstName"></span></p>

    </div>

    结果值同上

  • 相关阅读:
    iphone 图标下载
    iphone 下拉刷新(转)
    技术书评(.NET为主)
    我也设计模式——3.Singleton
    我也设计模式——14.Flyweight
    Web2.0技术研究笔记——1.分类与资源
    我也设计模式——4.Builder
    C#之CLR读书笔记 0
    IMemento 永远置顶
    我也设计模式——21.Memento
  • 原文地址:https://www.cnblogs.com/rdchen/p/10784426.html
Copyright © 2020-2023  润新知