Angular js: Remove certain element from ng-repeat

Question

I built buttons with ng-repeat:

<button ng-repeat="alphabet in alpha" ng-click="checkAlpha()" value="{{alphabet}}">{{alphabet}}</button>

$scope.alpha = 'abcdefghijklmnopqrstuvwxyz';

The question is how to remove only the button that is clicked. I used ng-hide in button, but then all the buttons are gone. What is the best way to do that? Thanks

ng-click="checkAlpha($index)" and provide implementation in checkAlpha() method to handle the deletion by index :) — Holybreath
– Holybreath, Commented Dec 18, 2013 at 10:55
You can use $index. There is a jsfiddle here jsfiddle.net/SX4gE/11 — Mehmet
– Mehmet, Commented Dec 18, 2013 at 10:56
Good fiddle, I've updated it to match the question :) Upvoted. — Holybreath
– Holybreath, Commented Dec 18, 2013 at 11:13

Holybreath · Accepted Answer · 2013-12-18 19:27:36Z

3

HTML:

 <div ng-controller='ctrl'>
    <button ng-repeat='alphabet in alpha ' ng-click="checkAlpha($index)" value="{{alphabet}}" id="{{$index}}">{{alphabet}}</button>
</div>

JS:(similar)

angular.module("app", []).controller("ctrl", function ($scope) {
    //lets create array from a string.
    $scope.alpha = 'abcdefghijklmnopqrstuvwxyz'.split("");

    $scope.checkAlpha = function(index) {
        $scope.alpha.splice(index, 1);//remove
    }
});

FIDDLE:

http://jsfiddle.net/SX4gE/20/

edited Dec 18, 2013 at 19:27

answered Dec 18, 2013 at 11:11

Holybreath

4132 silver badges8 bronze badges

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

3 Comments

Mouagip Over a year ago

The remove() is not necessary and no Angular way. Removing the character from the array is sufficient to remove the button (see here).

ishwr Over a year ago

@Holybreath Thank youu :) is it possible, to all the other buttons to stay in their position(absolut) after one button is clicked?

Holybreath Over a year ago

Updated the fiddle ;) jsfiddle.net/SX4gE/20 , if it's fine by you that ng-repeat is used on the div containing the buttons.

Collectives™ on Stack Overflow

Angular js: Remove certain element from ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related