Move table row from one table to another - AngularJS

Question

I have a question about ng-repeat and to move data from one table to another. Basically i have one table that is "master" and shows all the data from API request, after i populate it in a table i have a button on each row that works like "favorite-this-row". After a user click on "favorite-this-row" i want it to move the row to another table called "favorite-table" and show the data here.

This is my "Master"-table: (i wont paste whole table just the needy parts)

<md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100" 
    ng-show="(account|filter:searchName).length > 0"
    ng-repeat="account in containers | groupBy: 'accountId'  | toArray | filter:searchName track by $index ">

        ... Bunch of HTML code down......

    **//Favorite button**

<md-button ng-init="item.isfavorite = false;"
       ng-class="{yellow : item.isfavorite}"
       ng-click="item.isfavorite =!item.isfavorite; AddFavorite(item.isfavorite,container.containerId)"
       class="md-icon-button md-accent md-warn" aria-label="Favorite">      
<ng-md-icon icon="favorite" ng-init="item.isfavorite = false;"></ng-md-icon>
</md-button>

<p ng-if="item.isfavorite">Remove from favorites - {{item.isfavorite}} </p>
<p ng-if="!item.isfavorite">Add to favorite</p>

Now this is my "Favorite"-table:

<table>
   <tr ng-repeat="x in containers" ng-show="item.isfavorite">
         <td>s{{ x.containerId }}</td>
         <td>s{{ x.accountId }}</td>
    </tr>
</table>

When i click on the button <md-button ng-init="item.isfavorite = false;" ....> i want it to slice and move to my favorite table that just repeats containerId and accountId. as you can see ive added ng-show="item.isfavorite" but it does not work/show.

AddFavorite(item.isfavorite,container.containerId)" is just a console.log in controller.

Hope someone could help me, thanks!

First of all you shouldn't have ng-init="item.isfavorite = false;" as it should be by default or if it's not I would suggest you to initialize it in controller rather than DOM. Also seems like you are looping through account in containers so you would have account instead of item. — Aivus
– Aivus, Commented Jan 4, 2018 at 12:36
so i should change all item.isfavorite to container.isfavorite and also remove ng-init? But why does it not show in "favorite" table. ng-repeat is containers not account — Asim
– Asim, Commented Jan 4, 2018 at 12:38
Changing item.isfavorite to account.isfavorite should be enough to fix your issue. It does show in favorite because you are repeating x through containers and using same x to show child properties while in masters table you are repeating account through containers but you are using item which by your provided code does not exist. — Aivus
– Aivus, Commented Jan 4, 2018 at 12:45

jitender · Accepted Answer · 2018-01-04 12:46:47Z

1

As @avius said it should be account instead of item also in favirote table it should be x instead of item something like

<md-button class="md-raised" ng-click="account.isfavorite =!account.isfavorite">Button</md-button>

<p ng-if="account.isfavorite">Remove from favorites - {{account.isfavorite}} </p>
<p ng-if="!account.isfavorite">Add to favorite</p>



 <tr ng-repeat="x in containers" ng-show="x.isfavorite">

Check this plunker

answered Jan 4, 2018 at 12:46

jitender

10.4k1 gold badge22 silver badges49 bronze badges

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

1 Comment

Asim Over a year ago

Awsome, i changed to "account.isfavorite" and ng-repeat="x.isfavorite" and it worked :)

Collectives™ on Stack Overflow

Move table row from one table to another - AngularJS

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