AngularJs学习

wylc123 1年前 ⋅ 520 阅读

菜鸟教程

#######################################

初始化AngularJs应用(ng-app)

#######################################

gn-init定义初始值

#######################################

数据绑定ng-model:

<div data-ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p><b>总价:</b> {{quantity * price}}</p>

 

#######################################

ng-repeat指令循环集合:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}</li>
</ul>

 

#######################################

创建自定义指令app.directive:

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
restrict值可以是一下几种:

E 作为元素使用 <runoob-directive></runoob-directive>

A 作为属性使用 <div runoob-directive></div>

C 作为类名使用 <div class="runoob-directive"></div>

M 作为注释使用<!-- directive: runoob-directive -->

不写默认为EA,即可通过元素和属性名来调用。

更多内容请访问:IT源点

相关文章推荐

全部评论: 0

    我有话说: