zoukankan      html  css  js  c++  java
  • Angularjs快速入门(二)

    说说上一节的例子,$scope 我们没有创建这个对象,直接绑定就能获取里面的对象,这种风格遵循了一种叫迪米特法则的设计模式。

    然后angular还有一种很强大的功能叫“指令”。

    就是你可以吧模板编写成HTML的形式,而里面有些不属于HTML规范的东西,如引入的ng-controller。ng-model,接下来我们看个类似购物车的例子:

     1 <html ng-app=‘my-app’>
     2     <head>
     3         <tiltle>my shopping cart</title>    
     4     </head>
     5     <body ng-controller='CartController'>
     6         <h1>my order</h1>
     7         <div ng-repeat='item in items'>
     8             <span>{{item.title}}</span>
     9             <input ng-model='item.quantity'>
    10             <span>{{item.price|currency}}</span>
    11             <span>{{item.price * item.quantity|currency}}</span>
    12             <button ng-click="remove($index)">remove</button>
    13         </div>
    14         <script src="angular.js"></script>
    15         <script>
    16             function  CarController($scope){
    17                $scope.items=[
    18                     {title:'Paint pots',quantity:8,price:3.33},
    19                     {title:'Pack pots',quantity:5,price:2.33},    
    20                     {title:'Pedbbles pots',quantity3,price:12}
    21                 ];
    22                 $scope.remove=function(index){
    23                     $scope.items.splice(index,1);
    24                 }
    25             }
    26         </script>
    27         </body>
    28     </html>

    这其中有几个解释的地方,第一个就是ng-app='my-app',这个表示整个页面都是angular管理页面

    第二个,ng-repeat=‘item in items’表示items数组中的每个元素都把<div>的dom结构复制一份,包括div本身,items有三组数,所以现在有三个div

    第三个,{{item.title}}通过{{}}绑定数据,与ng-model='item.quantity'创建绑定关系

    第四个,

    {{item.price|currency}}
    {{item.price * item.quantity|currency}}过滤器
    currency是货币过滤器是内置的它可以为我们实现美元格式化。

    第五个,
    ng-click="remove($index)"
    删除按钮,能删除购物车的物品。
  • 相关阅读:
    批量 kill mysql 线程
    ansible playbook实践(三)-yaml文件写法
    ansible playbook实践(二)-基础相关命令
    ansible playbook实践(一)-基础环境安装
    rsync源目录写法的一点小细节
    python threading queue模块中join setDaemon及task_done的使用方法及示例
    python多线程限制并发数示例
    完全总结bash中的条件判断test [ [[ 使用
    CHECK MEMBER TYPE
    C++14 make code cleaner
  • 原文地址:https://www.cnblogs.com/937522zy/p/4980112.html
Copyright © 2011-2022 走看看