Question

我有一个产品列表，每个产品都有多种颜色供用户选择，点击颜色时会显示勾号。所以我要做的是：

只有一个刻度线会显示在一组颜色
当用户点击ADD链接时，将传递参数，并告诉我产品ID以及是否选择了颜色

我的问题 当用户点击颜色时，我无法使其他刻度在组内消失。

请使用以下链接并单击颜色以便更好地演示 this is the example

HTML

<div class="col-lg-4 col-md-4 col-sm-6" ng-repeat="product in products">
             <div class="product-container">
                 <h2>{{product.name}}</h2>
                 <strong>Choose a Color</strong>
                 <div class="cycle-colors big-cycle" >
                    <i single-cycle-color ng-repeat="color in colors" class="cycle-color" bgcolor="{{color.code}}"></i>
                </div>
                <div class="text-right" >
                    <a class="add" ng-click="addProduct(product.id)" >ADD</a>
                </div>
             </div>
</div>

的Javascript

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


app.controller('ProductController', ['$scope', function ($scope) {

    $scope.products = [
       {id:'1', name:'Product Name'},
       {id:'2', name:'Product Name'},
       {id:'3', name:'Product Name'},
       {id:'4', name:'Product Name'},
       {id:'5', name:'Product Name'},
       {id:'6', name:'Product Name'}

    ];

    $scope.colors = [
       {code:'#f1f3f3'},
       {code:'#b9bcbf'},
       {code:'#737d82'},
       {code:'#323237'},
       {code:'#00d7ff'},
       {code:'#0069d2'},
       {code:'#c0df16'},
       {code:'#24586e'},
       {code:'#112f3b'}
    ];

    $scope.addProduct = function(id){
            alert(id);
    }

}]);

app.directive('singleCycleColor', function () {
return {
        restrict: "AE",
        scope: {'bgcolor':'@'},
        replace:false,
        link: function (scope, element, attrbute) {

                //
                element.css('background-color', scope.bgcolor);

                // using white or black tick
                if (scope.bgcolor == '#ffffff') {
                    // using black tick
                    var tickClass = 'tick-black';
                } else {
                    // using black white tick
                    var tickClass = 'tick-white';
                }

                // on cycle click
                element.on('click', function () {

                    // add tick class
                    element.addClass(tickClass);
                    element.addClass('active');
                });

        }
    };
});

Answer 1

从所有兄弟姐妹中删除tickClass，然后再将其添加到活动的

angular.forEach(element.siblings(), function(sibling){
  angular.element(sibling).removeClass(tickClass);
});

这只解决了第一个问题，但是让其他颜色选择消失了。

对于第二个问题，您需要将当前颜色代码选择保存在父作用域中并将其传递给addProduct方法

<a class="add" ng-click="addProduct(product.name, selectedColor.code)" >ADD</a>

在你的指令中

scope.$parent.selectedColor.code = scope.bgcolor;

以下是解决这两个问题的completed codepen。

Answer 2

kachhalimbu为您的第一个目标（每个产品只有一个刻度）的答案是好的。

为了您的第二个目标（告诉产品 ID 以及是否已选中颜色）：

             <div class="cycle-colors big-cycle" >
                <i single-cycle-color ng-repeat="color in colors" class="cycle-color" bgcolor="{{color.code}}"
         ng-click="productColorPicked($parent.$index, color.code)"></i>
            </div>
            <div class="text-right" >
                <a class="add" ng-click="addProduct($index)" >ADD</a>
            </div>
         </div>

获取产品ID：

我传递ng-repeat的$ index，并使用此索引在$ scope.products中查找产品。

检查是否已选择（产品的）颜色：

当用户选择颜色时，会传递productID（索引）（如果需要，还会传递颜色）。
使用此索引，$ scope.products [index] .colorChecked变为true。

查看第二个目标的工作解决方案：http://codepen.io/anon/pen/doXxBe?editors=101

AngularJS - 在ng-repeat

2 个答案: