如何勾选复选框,我如何添加和列出项目到购物车?

时间:2015-02-19 13:48:03

标签: angularjs

我需要像bellow这样的东西。当我点击复选框时应该添加到购物车中我已经检查了哪个项目所有细节应该在购物车上列出。我怎么能实现它?

<div ng-app="MyApp" ng-controller="MyCart" >
<div ng-repeat="x in names">
<input type="checkbox" name="item">{{x.item}} {{x.price}} </input>
</div>
<div>
 <h1>Cart</h1>
        <div>Ex. Order Summary 100 
        //here i need to show the order price </div>
             <div>
           EX.  1.xxx Rs.10
                2.yyy rs.90
        //Here i need to list the items which are checked on the above 
        </div>
        </div>
            </div>
    <script>
    angular.module('MyApp', [])
    .controller('MyCart', ['$scope', '$http', function($scope, $http) {
        $http.get('AngularJs-Response.jsp').success(function(response) {
            $scope.names = response;      
          });     
    }]);
    </script>

1 个答案:

答案 0 :(得分:0)

<div ng-app="myApp" ng-controller="startCtrl">
    <div ng-repeat="x in names">
        <input type="checkbox" ng-model="item.isSelected" ng-change="value(item.isSelected,x)"/>{{x.name}} {{x.price}}
    </div>
    <hr/>
    <div>Selected Item</div>
    <div ng-repeat="y in selectedItems" ng-show="selectedItems.length>0">
        {{y.name}}----{{y.price}}
    </div>
    <div ng-show="selectedItems.length<=0"> No item selected </div>
</div>

您的角度代码,

var app=angular.module("myApp",[]);
app.controller("startCtrl",function($scope){
    $scope.names=[{name:"mobile",price:"100"},{name:"Laptop",price:"200"},{name:"bag",price:"50"}];

$scope.selectedItems=[];    
$scope.value=function(isSelected,item)
{


        if(isSelected==true)
        {
            $scope.selectedItems.push(item);
        }
        else
        {
                console.log(item.name);              angular.forEach($scope.selectedItems,function(itemRmv,$index){
                if(itemRmv.name==item.name)
                {
                    $scope.selectedItems.splice($index,1);
                }
            })
        }
   }
});

工作小提琴, http://jsfiddle.net/zqpxtbzo/