angular-入门案例

Posted web前端知识大全

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular-入门案例相关的知识,希望对你有一定的参考价值。

一个购物车产品清单,可以自行改变数量,总价自动计算的小例子:

<body ng-app="myApp">
   <div ng-controller="firstCtrl">
       <h3 class="layui-header">你的购物车</h3>
       <table class="layui-table table">
           <thead>
               <tr>
                   <th>名称</th>
                   <th>数量</th>
                   <th>单价</th>
                   <th>总价</th>
                   <th>编辑</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat = "item in list">
                   <td>{{item.title}}</td>
                   <td><input type="text" ng-model="item.num"></td>
                   <td>{{item.price | currency}}</td>
                   <td>{{item.num*item.price | currency}}</td>
                   <td><a class="remove" ng-click="remove($index)">删除</a></td>
               </tr>
           </tbody>
       </table>
   </div>
</body>

下面对以上代码进行说明:

1.ng-app:
<html ng-app>:

ng-app属性,用来告诉页面哪一部分需要使用angular管理.通常情况下都这样管理.

2. ng-controller:
<div ng-controller="CarController">

使用一个控制器来控制页面中的某个区域,这里就是管理这个<div>到</div>里的所有内容
这里使用的控制器就是script.js里定义的CarController函数

3. ng-repeat:
<tr ng-repeat="item in list">

循环当前的标签(包括里面的内容和自己),循环中的当前变量就是item,item在当前作用域的items变量里进行循环
即CarController里定义的$scope.items数组

4. {{ }}:
<td>{{item.title}}</td>

使用{{}}来动态的绑定视图里显示的数据.{{}}里就是当前作用域里的变量

5. ng-model:
ng-model="item.num"

ng-model用在输入框里,使输入的内容和它等于的变量数据进行绑定,
也就是说,输入的值变化,变量就变化,变量变化,视图上对应显示的数据也变化

6. currency:
<td>{{item.price|currency}}</td>
<td class="red">{{item.price*item.num|currency}}</td>

angular带有过滤器特性,可以用来做文本格式的转换,其中,currency货币过滤器,可以实现美元格式化

7. ng-click:
<button ng-click="remove($index)">remove</button>

为元素绑定click事件的回调,点击后就调用作用域下的remove方法,也就是在CarController中添加的remove方法

8. $index:
remove($index)

$index是在ng-repeat过程中的循环的索引值,从0开始

9. 控制器:
myApp.controller("firstCtrl",function($scope){

});
控制器负责管理相关的区域的逻辑.函数的形参$scope就是当前区域的作用域,区域中的变量,方法,都从它的作用域中寻找.
比如这里的$scope.items和$scope.remove

10. 另外,ng-repeat所创建的列表是和数据的更新事实绑定的,所以当使用remove方法删除数据中的某一组数据,那么,视图中相应的ui也会被删除.



以上是关于angular-入门案例的主要内容,如果未能解决你的问题,请参考以下文章

typescript Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming/angular-2/

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

Apollo Codegen 没有找到生成代码的操作或片段

推荐:Angular2完整案例