码迷,mamicode.com
首页 > Web开发 > 详细

Angularjs[22] - 内置渲染指令

时间:2017-01-30 22:48:10      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:应用   repeat   htm   http   blog   属性   tle   javascrip   image   

指令:利用指令来扩展HTML标签,增加声明式语法来实现想做的任何事,可以应用有特殊意义的元素和属性来替换一般的HTML标签。

渲染指令:

  • ng-init:初始化应用时创建一个变量;
  • ng-bind: 使用给定的变量或表达式的值来替换 HTML 元素的内容;
  • ng-repeat:
  1. $index:当前索引;
  2. $first:是否为第一个元素;
  3. $middle:是否为非头非尾元素;
  4. $last:是否为尾元素;
  • ng-include: 包含外部 HTML 文件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app="myApp">
        <p>{{1+1}}</p>
        <p ng-bind="1+1"></p>

        <!--$scope.cityArr = [‘上海‘,‘北京‘,‘南京‘];-->
        <ul ng-init="cityArr = [‘上海‘,‘北京‘,‘南京‘]">
            <li ng-repeat="city in cityArr">
                <span>
                    index:{{$index}}
                </span>
                <span>
                    first:{{$first}}
                </span>
                <span>
                    middle:{{$middle}}
                </span>
                <span>
                    last:{{$last}}
                </span>
                <span>
                    {{city}}
                </span>
            </li>
        </ul>

        <div ng-include="‘other.html‘"></div>
        <div ng-include src="‘other.html‘"></div>
    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>

技术分享

 

Angularjs[22] - 内置渲染指令

标签:应用   repeat   htm   http   blog   属性   tle   javascrip   image   

原文地址:http://www.cnblogs.com/bky-1083/p/6358442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!