首页 > 代码库 > angular js 综合笔记案例
angular js 综合笔记案例
AngularJS 表达式 （1.{{}} 2.ng-bind(单项绑定)）
AngularJS 表达式写在双大括号内：{{ expression }}
AngularJS 使用表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
表达式{{}} 案例
ng-init 初始化数据一般会用ng-controller代替
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>
</body>
表达式ng-bind 案例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: <span ng-bind="quantity * cost"></span></p>
</div>
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-model双向绑定案例（改变input里面的数据下面{{}}里面的数据也会改变）
<div ng-app="" ng-init="firstName=‘John‘">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div>
ng-repeat 指令用在一个对象数组上：循环数组
<div data-ng-app="" data-ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<div data-ng-app="" ng-init="names=[{id:1,name:‘狗‘},{id:1,name:‘猫‘}]">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li data-ng-repeat="x in names">
{{ x.id }}
</li>
</ul>
</div>
?
创建自定义的指令
使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "ACEM"
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
angular js 综合笔记案例