Question

我正在尝试为包含我的产品的div添加边框。我希望它与我已经拥有的ng-click一起工作，将产品添加到购物车。因此，当用户点击“选择”按钮时，边框会绕过该产品，让他们知道他们已经选择了它，如果他们点击其他产品，则取消选择当前产品并选择单击的产品。

我已经设置了许多方法，但这是我得到的最接近的。单击该按钮时，它会在所有产品/ div上添加样式。任何帮助都是极好的。我是Angular的新手，这打破了我的大脑。

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>

我认为我的ng-repeat搞砸了，但我需要它才能从我的DataBase中提取项目。

Answer 1

你可以使用下面的代码，它肯定会起作用

＆＃13;

<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>

＆＃13;

我为产品对象引入了一个新参数，每个参数都是唯一的。此参数在开头将设置为false，并且在单击按钮时将产品对象传递给函数。每次单击该按钮时，product.product_isSelected参数将被设置为当前的opppsite

Answer 2

用此

替换您的HTML

如果isSelected变为true，那么您要应用的类的引用。

this.props.pantry...

Answer 3

我能够使用$ index来实现这一点。

＆＃13;

<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':isSelected === $index}" 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($index)">Select Package</button>

＆＃13;

{{1}}

＆＃13;

单击时添加边框样式以及将项目添加到购物车

3 个答案: