Multiple tables and md-selected

[tw-zz-rk]

Try using the select all checkbox in either table of this plunker, note that the md-selected arrays for the separate tables exhibit unexpected behavior.

[daniel-nagy]

This is strange, looking into it.

[daniel-nagy]

It's a scoping issue. I forked your Plunker to demonstrate. I created an isolate directive that creates a new scope and attached it to the cards. I honestly don't know why this is an issue. the md-data-table directive should create a new isolated scope.

It's getting late enough too where I don't feel like looking at code anymore. I'll see about fixing this tomorrow. :)

[daniel-nagy]

@twrk sorry I haven't been able to get to this yet. I've been pretty busy this week, I may not have a solution for this until this weekend sometime. I know what the problem is and I think it may take a little bit of refactoring to fix it properly.

[tw-zz-rk]

@daniel-nagy No problem, you've been quick to respond to and to address issues, keep up the great work!

[enthalpy-yan]

I also had some scope issue. I always get not defined as an array error even though it's an array in my controller.

[daniel-nagy]

@enthalpy-yan It sounds like your controller's scope may not be visible to your table. Make sure the scope of your table is a descendent of your controller's scope.

[enthalpy-yan]

@daniel-nagy yea, I was thinking the same thing but the data(same scope) in the table rendered correctly.

[daniel-nagy]

Interesting, have you tried using object notation for your selected items? Something like,

var items = {
  selected: []
};

Sometimes this fixes issues with scope inheritance. If that doesn't work, if you could create a codepen, plunker, fiddle, etc. recreating the issue I would be happy to fix it for you.

[gerbil]

How can i use different md-row-select arrays for ng-repeat created tables?

Right now it's not possible to use veriables inside: md-row-select="{{server.name}}"

Also, i've tried to use var items = { selected: [] }; without success.

[gerbil]

I've tried md-row-select=" '{{server.name}}' ", but no i got errors like: Error: [$compile:nonassign] Expression ' 'TESTF' ' used with directive 'mdDataTable' is non-assignable!

[daniel-nagy]

@gerbil strings are non-assignable, the syntax should be md-row-select="server.name" where server.name is an array in your controller. When you select a row it will be pushed onto this array.

[gerbil]

I have 10 tables on one page (using ng-repeat, so i don't want manualy set 'selectedServer1', 'selectedServer2'), how can i use 10 different 'selected' arrays in this case?

[daniel-nagy]

Solution One

Use the ng-controller syntax.

<md-card ng-controller="myController" ng-repeat="table in tables"></md-card>

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope.

Codepen

Solution Two

Put the array on the variable you are repeating.

<md-card ng-repeat="table in tables">
  <md-data-table-container>
    <table md-data-table md-row-select="table.selected">
   <md-data-table-container>
</md-card>

Solution Three

Create an array of arrays and access them by index.

// in you controller
scope.selected = [[],[],[]]

<md-card ng-repeat="table in [1, 2, 3]">

  <md-data-table-toolbar class="alternate" ng-show="selected[$index].length">
    <div>{{selected[$index].length}} {{selected[$index].length > 1 ? 'items' : 'item'}} selected</div>
  </md-data-table-toolbar>

  <md-data-table-container>
    <table md-data-table md-row-select="selected[$index]"></table>
  </md-data-table-container>

<md-card>

[orbatschow]

Tested solution two, works absolutely fine as far as i can see.

[gerbil]

Solution number two gives me:

md-row-select="server.selected" : server.selected is not defined as an array in your controller, i.e. server.selected = [], two-way data binding will fail.

+++

I was able to fix this using: selected[server.name] in md-row-selected and $scope.selected[$scope.serverList[i].name] = []; in controller.

Thnx.

[daniel-nagy]

@gerbil to use solution two you would need to explicitly define the property selected as an array on your server object,

server = {
  selected: []
};

Your solution works too though.

[duongtdvn]

Sorry for digging this up but I'm currently had an weird issue with the checkbox. Please take a look at this codepen which using the solution two: http://codepen.io/duongtd/full/Qjjadm

[daniel-nagy]

You're not using solution two correctly. You're using the same array to select items in both tables. You need to either attach the array to the objects you're repeating over or create a separate object of arrays and index them by key.

$scope.selected = {
  eligendi: [],
  doloremque: []
};

<table md-data-table md-row-select="selected[key]"></table>

[duongtdvn]

Thank you, I have tried with the selected[key] before, but I have no idea about the controller since the key is dynamically. Should I have a same loop as in the view and placed it in controller?

[duongtdvn]

I'm just modified the code a little bit so the selected[key] will match the key in the controller since it is dynamically. However i met this error:

Cannot set property 'eligendi' of undefined

can you please take a look? http://codepen.io/duongtd/pen/Qjjadm?editors=101

[duongtdvn]

Okay, I got it fixed! Instead of create the groupBy in the view, I made it in the controller and then do the ngRepeat in the view. http://codepen.io/duongtd/full/Qjjadm Hope someone if facing issue like me find the solution.

[parassanghani]

Hi there, i love this datatable, though i am having a problem when using multiple tables on a single page, all instances has stopped to sort and paginate. do you have any idea what could be wrong?