ng-click remove item from inner array

Question

So i have an array of objects that is being displayed as such:

<div class="panel panel-default" ng-repeat="row in jobprofiles">
<div class="panel-heading">
    {{row.name}}
</div>
<ul class="list-group alt">
    <li class="list-group-item" ng-repeat="competence in row.selectedCompetence">
        <div class="media">
            <span class="pull-left thumb-sm"></span>
            <div class="pull-right text-success m-t-sm">
                <button class="btn btn-danger" ng-click="competence.remove()"><i class="fa fa-times"></i></button>
            </div>
            <div class="media-body">
                <div><a href="">{{competence.name}}</a></div>
                <small class="text-muted">{{competence.competence_type_id == 1 ? 'Faglig' : 'Personlig'}}</small>
            </div>
        </div>
    </li>
</ul>

as you can see that each li has a button where i want to remove the competence object of the inner array.

Can anyone tell me how i might do that?

Nielarshi · Accepted Answer · 2015-03-05 12:28:29Z

Assuming your jobprofiles & selectedCompetence are objects

<div class="panel panel-default" ng-repeat="(indexRow, row) in jobprofiles ">
<div class="panel-heading">
    {{row.name}}
</div>
<ul class="list-group alt">
    <li class="list-group-item" ng-repeat="(indexCompetence, competence) in row.selectedCompetence">
        <div class="media">
            <span class="pull-left thumb-sm"></span>
            <div class="pull-right text-success m-t-sm">
                <button class="btn btn-danger" ng-click="remove(indexRow, indexCompetence)"><i class="fa fa-times"></i></button>
            </div>
            <div class="media-body">
                <div><a href="">{{competence.name}}</a></div>
                <small class="text-muted">{{competence.competence_type_id == 1 ? 'Faglig' : 'Personlig'}}</small>
            </div>
        </div>
    </li>
</ul>

and in controller

$scope.remove(rowIndex, competenceIndex) {
    delete $scope.jobprofiles[rowIndex][competenceIndex];
}

In case if they are Arrays, you can refer to https://docs.angularjs.org/api/ng/directive/ngRepeat

for

track by

expression.

eladcon · Accepted Answer · 2015-03-05 12:08:43Z

0

Add a remove function on the scope which takes, the competence and the inner array, and removes the item with the splice function:

$scope.removeCompetence(competence, selectedCompetence) {
    var index = selectedCompetence.indexOf(competence);
    selectedCompetence.splice(index, 1);
}

In your HTML:

<button class="btn btn-danger" ng-click="removeCompetence(competence, row.selectedCompetence)"><i class="fa fa-times"></i></button>

answered Mar 5, 2015 at 12:08

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Comments

bviale · Accepted Answer · 2015-03-05 12:11:27Z

0

What about <button class="btn btn-danger" ng-click="row.selectedCompetence.splice($index, 1)"><i class="fa fa-times"></i></button> ?

answered Mar 5, 2015 at 12:11

bviale

5,3933 gold badges30 silver badges48 bronze badges

Collectives™ on Stack Overflow

ng-click remove item from inner array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related