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

Question

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:

changeStyle click event:

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

};

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

Please mention in qquestion that What is the issue you are facing in this? — Satyam Koyani
– Satyam Koyani, Commented Mar 11, 2014 at 2:53

Orlando · Accepted Answer · 2014-05-01 01:31:44Z

1

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>

edited May 1, 2014 at 1:31

Orlando

9,7223 gold badges62 silver badges55 bronze badges

answered Mar 11, 2014 at 5:43

Charlie Martin

8,4363 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Jones Over a year ago

Strike my response above: Your solution works, but it is webStyles not webstyles

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related