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

Question

我正在尝试为放置我的产品的 div 添加边框。我希望它与我已经拥有的将产品添加到购物车的 ng-click 一起使用。因此，当用户单击 'select' 按钮时，该产品周围会出现一个边框，让他们知道他们已经选择了该产品，如果他们单击另一产品，则会取消选择当前产品并选择所单击的产品。

我已经设置了很多方法，但这是我得到的最接近的方法。单击该按钮时，它会在所有 products/divs 上添加样式。任何帮助都是极好的。我是 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 搞砸了，但我需要它才能从数据库中提取项目。

Answer 1

用这个

替换你的HTML

如果 isSelected 变为真，您有一个 quote class 要应用。

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

Answer 2

你可以用下面的代码，一定可以的

<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 参数将设置为当前

的对立面

Answer 3

我能够使用 $index 让它工作。

app.controller('letterCreateCtrl', function($scope, $state, letterCreateSrv, cartSrv) {
$scope.activeProduct = function(index) {
    $scope.isSelected = index;
};
});

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

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

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

javascript

angularjs

css

angularjs-ng-click