angularJS表达式和指令

主要是描述angularJS如何扩展html的:(模型后面会涉及)

例子1:通过指令来扩展html

<body ng-app="myapp">  <!--  ng-app指令 定义angular的最大控制范围-->

  <div ng-init="name='luna';age=30">  <!-- ng-init指令  可以采用表达式的形式来初始化模型-->

    姓名是:<span>{{name}}</span>

    年龄是:<span>{{age}}</span>  <!-- 表达式可以绑定到html中-->

       加法计算: <span>{{ 100 + 10000}}</span>

  </div>

  <div>

    输入价格:<input type="text" ng-model="price"/>  <!--  通过ng-model指令将输入框的值绑定在模型上 -->

  </div>

</body>

这个示例子主要是描述了angular表达式和指令是如何使用在html中的。

这些指令是angular跟视图能连接起来的唯一方式,做html设计的设计者可以专注于设计这些html模板。

当然也可以自己定义一个指令:

例子:

var app = angular.module("myApp", []);
app.directive("myDirective", function() {
    return {
        template : "<h3>自定义指令!</h3>"
    };
});

返回的对象中包含

{

  restrict : "EA", // 表示 指令可以放在哪些地方

  templateUrl : "",   //  html模板地址

  templete : "",   //  string   html模板字符串表示

}  

<myDirective></myDirective>  这样就相当于将定义的指令替换在html中。

 

ng-repeat指令可以遍历数据:

<div ng-app="" ng-init="names=['zhaoyang','john','chenlong']">

<p>使用 ng-repeat 来循环数组</p>

<ul>

  <li ng-repeat="x in names"> {{ x }}

  </li>

</ul>

</div>

posted @ 2019-11-10 17:31  朝阳人生  阅读(187)  评论(0编辑  收藏  举报