我正在尝试向包含我的产品的 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 搞砸了，但我需要它才能从我的数据库中提取我的元素。
最佳答案
你可以使用下面的代码，它一定可以工作
<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>我为产品对象引入了一个新参数，每个参数都是唯一的。 此参数将在开始时设置为 false，并在单击按钮时将产品对象传递到函数中。 每次单击按钮时，product.product_isSelected 参数将设置为当前值的对立面
关于javascript - 单击添加边框样式以及将元素添加到购物车，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40688730/