Angularjs[22] - 内置渲染指令

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

渲染指令：

ng-init：初始化应用时创建一个变量；
ng-bind：使用给定的变量或表达式的值来替换 HTML 元素的内容；
ng-repeat：

$index：当前索引；
$first：是否为第一个元素；
$middle：是否为非头非尾元素；
$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>

时间： 2024-10-15 18:55:38

Angularjs[22] - 内置渲染指令的相关文章

Angularjs[22] - 内置事件指令

ng-change ng-click ng-dbclick ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove mg-mouseover ng-mouseup ng-submit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> &l

AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请求 $resource 创建一个可以restful服务器端数据源交互对象 $location 用于返回当前页面的URL地址 $window 浏览器的window元素的jquery包装 $document 浏览器的document元素的jQuery包装 $rootscope 跟作用域的访问

angularJS使用内置服务

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp" ng-contr

依赖内置ng-model指令的自定义指令

ng-model是AngularJS的原生指令,通过require: 'ngModel'可以更加深入地处理数据的双向数据绑定. ng-model里面的属性有: $parsers:保存了从viewValue到modelValue绑定过程中的处理函数. $formatters:保存了从modelValue到viewValue绑定过程中的处理函数. $setViewValue:当AngularJS外部发生某件事情的时候,需要调用这个函数才能让AngularJS知道应该更新modelValue了. $r

Angularjs[24] - 内置节点属性

ng-style    <div ng-style="defaultStyle" ng-show="status"> ng-style </div> $scope.defaultStyle = {

夺命雷公狗—angularjs—15—内置封装好的计时器$interval和$timeout

这里其实和js源生的效果是一样的,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> </head> <body ng-

AngularJS中的内置指令

AngularJS可以把模版编写成HTML的形式,利用指令来拓展HTML标签,增加声明式语法来实现想做的任何事情.AngularJS的内置指令包括渲染指令.事件指令和节点指令. 渲染指令 ng-bind: <p ng-bind="something"></p> 相当于: <p>{{something}}</p> ng-bind-template: 如果用ng-bind-template,则相当于: <p ng-bind-templa

AngularJS 内置过滤器

1. currency currecy过滤器可以将一个数值格式化为货币格式.用{{ 123 | currency }}来将123转化成货币格式. currecy过滤器允许我们自己设置货币符号.默认情况下会采用客户端所处区域的货币符号,但是也可以自定义货币符号. {{1000 | currency }}  {{1000 | currency:"RMB ￥" }}  2. date da

angularJS1笔记-(8)-内置指令

index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .colorStyle { color: #3e8f3e; } </style> </head> <body> <div ng-app="myApp"> <div ng-