CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Mike Jones
Mike Jones

Reputation: 475

AngularJs - Add / remove icon on ng-click in ng-repeat

Goal: On ng-repeat, initial 'isSelected' from array has icon. If any item is clicked after display, prior item isSelected= false and has icon removed, current item has isSelected=true and gets icon.

Current html:

<a data-ng-repeat="style in webStyles" id="{{style.id}}" data-ng-click="changeStyle(style.id)">
       <!-- only if item isSelected = true -->
                <i class="fa fa-check fa-fw" id="skin-checked"></i>
       <!-- end selected icon -->
    {{style.name}}
 </a>

The controller:

  1. changeStyle click event:

    $scope.changeStyle = function (style) {
    $scope.$emit('websiteStyleChange', style);
   // toDo: make all isSelected false, make item just clicked isSelected = true

};

  2. data:

    $scope.webStyles = [
    { name: "Default", id: "style_0", isSelected: true},
    { name: "One", id: "style_1", isSelected: false},
    { name: "Two", id: "style_2", isSelected: false}
];

Any ideas?

Thanks ... .

Upvotes: 0

Views: 1303

Answers (1)

Charlie Martin
Charlie Martin

Reputation: 8406

You can just loop through your webStyles after each click and set all isSelected to false except the one that was just clicked. For example...

$scope.changeStyle = function (style) {
    angular.forEach($scope.webStyles, function (value, key) {
        value.isSelected = value.id === style ? true : false;
    });
};

Then, to show/hide your icon, use the ng-show directive..

<i class="fa fa-check fa-fw" id="skin-checked" ng-show="style.isSelected"></i>

Upvotes: 1

Related Questions