StuffedPoblano StuffedPoblano - 20 days ago 6
Javascript Question

Add a border style on click along with adding item to cart

I am trying to add a border to a div that houses my product. I want it to work together with the ng-click I already have that adds the product to the cart. So, when a user clicks the 'select' button a border goes around that product letting them know they have selected it, if they click on another product it deselects the current one and selects the one clicked.

I have set it up many ways, but this is the closest I got. When the button is clicked it is putting style on all the products/divs. Any help would be awesome. I am new to Angular and this is breaking my brain.



var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.isSelected = false;
$scope.activeProduct = function() {
$scope.isSelected = !$scope.isSelected;
};

});

.clear
{
clear: both;
}

.product-chooser{
margin-right: 0;
}

.product-chooser .product-chooser-item{
padding: 11px;
border-radius: 6px;
cursor: pointer;
position: relative;
border: 1px solid #efefef;
margin-bottom: 10px;
margin-left: 10px;
}

.selected {
border: 4px solid #D9534F;
background: #efefef;
padding: 8px;
filter: alpha(opacity=100);
opacity: 1;
}

.product-chooser .product-chooser-item img{
padding: 0;
}

.title{
display: block;
margin: 10px 0 5px 0;
font-weight: bold;
font-size: 12px;
}

.description{
font-size: 12px;
}

<div class="row form-group product-chooser">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" ng-repeat="product in products">
<div ng-class="{'selected': isSelected}" class="product-chooser-item">
<img ng-src="{{product.product_image}}" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="">
<div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<span class="title">{{product.product_name}}</span>
<span class="description">{{product.product_desc}}</span>
<button class="btn btn-success" ng-click="addProductToCart(product); activeProduct()">Select Package</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>





I think my ng-repeat in there is messing it up, but i need it in order to pull my items from my DataBase.

Answer

You can use the below code,it will definitely work

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
 <script src="angular.min.js"></script>
<title>Insert title here</title>
<style>
.clear
{
    clear: both;
}

.product-chooser{
    margin-right: 0;
}

	.product-chooser .product-chooser-item{
		padding: 11px;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		border: 1px solid #efefef;
		margin-bottom: 10px;
        margin-left: 10px;
	}

	.selected {
		border: 4px solid #D9534F;
		background: #efefef;
		padding: 8px;
		filter: alpha(opacity=100);
		opacity: 1;
	}

		.product-chooser .product-chooser-item img{
			padding: 0;
		}

		.title{
			display: block;
			margin: 10px 0 5px 0;
			font-weight: bold;
			font-size: 12px;
		}
</style>
</head>
<body ng-controller="myCtrl">
<div class="row form-group product-chooser">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" ng-repeat="product in products">
            <div ng-class="{selected:product.product_isSelected}" class="product-chooser-item">
                <img ng-src="{{product.product_image}}" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="">
                <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
                    <span class="title">{{product.product_name}}</span>
                    <span class="description">{{product.product_desc}}</span>
                    <button class="btn btn-success" ng-click="addProductToCart(product); activeProduct(product)">Select Package</button>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
<script>
(function () {
	'use strict';
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
	$scope.isSelected = false;
	$scope.products = [
		                  {
		                	  product_name: "Milk Cartons",
		                	  product_desc: "2",
		                	  product_isSelected: false
		                  },
		                  {
		                	  product_name: "Donuts",
		                	  product_desc: "200",
		                	  product_isSelected: false
		                  },
		                  {
		                	  product_name: "Cookies",
		                	  product_desc: "300",
		                	  product_isSelected: false
		                  },
		                  {
		                	  product_name: "Chocolate",
		                	  product_desc: "5",
		                	  product_isSelected: false
		                  },
		                  {
		                	  product_name:"Condensed Milk Tins",
		                	  product_desc:"10",
		                	  product_isSelected: false
		                  }
		                ];
			
	$scope.activeProduct = function(product) {
	    product.product_isSelected = !product.product_isSelected
	  };
	  
	 });

	})();
</script>
</body>
</html>

I have introduced a new parameter for the product object,which will be unique for each. This parameter will be set to false in the beginning and the product object is passed into the function on click of the button. each time the button is clicked the product.product_isSelected parameter will be set to the opppsite of what it is currently