道招

AngularJs用ng-click,ng-if等轻松实现购物车功能

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

AngularJs用ng-click,ng-if等轻松实现购物车功能

用angulajs里面的ng-model实现input的默认值,ng-click来实现点击,用ng-if来判断“购物车清单”是否需要显示,用ng-repeate来实现购物车里面的内容的循环输出。

HTML代码如下

<body ng-app="app">
    <div ng-controller="FCtrl">
        <h2>{{data2.msg}}</h2> <input type="text" ng-model="data2.shopcart['0']">
    </div>
    <div ng-controller="Shopping"> <input type="text" class="formcontrol" ng-model="goods"> <span class="input-group-btn">
            <div class="button" ng-click="buy()">添加</div>
        </span>
        <h1 ng-if="shopcart.length>0">购物车清单</h1>
        <ul class="list-group">
            <li ng-repeat="item in shopcart track by $index">{{item}} <a ng-click="shopcart.splice($index,1)">删除</a></li>
        </ul>
    </div>
</body>

Javascript代码如下:

 angular.module("app", [])
.controller('FCtrl', function($scope, Data2) { 
  $scope.data2 = Data2; 
}).controller('Shopping', function($scope, Data2) { 

  $scope.shopcart=Data2.shopcart; 
  $scope.buy=function(){ 
    $scope.shopcart.push($scope.goods); 
  } 
})
更新时间:
上一篇:Angularjs的双向绑定下一篇:this指针变更,重新bind

相关文章

《 AngularJS深度剖析与最佳实践》安装front-jet失败

作者雪狼已经给出了解决方案,地址 估计学习这个的读者应该都能翻过去吧。 本人在此也写一下自己的安装经历吧。 我一开始买到书后就想安装front-jet,始终没有成功,之后再github上找源码无 阅读更多…

Angularjs的双向绑定

AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针 阅读更多…

浅析angular.bind

简单来说angular.bind函数是用来返回一个自己设定参数的函数。它有三个参数,其中第三个参数是可选的。第二个参数是被绑定的函数fn,第一个参数是第二个参数fn的上下文对象,用this调用。 阅读更多…

关注道招网公众帐号