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)"
    删除按钮,能删除购物车的物品。
  • 相关阅读:
    索引器
    拆箱,装箱,枚举,结构
    题解报告(CDUT暑期集训——第二场)
    题解报告(CDUT暑期集训——第一场)
    第十一届四川省程序设计竞赛赛后感(电科两日游
    ZOJ4108 Fibonacci in the Pocket
    ZOJ4107 Singing Everywhere
    ZOJ4106 Lucky 7 in the Pocket
    ZOJ4105 Abbreviation
    ZOJ4104 Sequence in the Pocket
  • 原文地址:https://www.cnblogs.com/937522zy/p/4980112.html
Copyright © 2011-2022 走看看