Listview: not possible to generate list dividers with AngularJS

[dioslaska]

The following code does not work:

<ul id="demo" mobiscroll-listview="options" mobiscroll-data="items">
    <li data-role="{{item.isGroupName ? 'list-divider' : ''}}">{{item.name}}</li>
</ul>

The expression evaluates only after mobiscroll is initialized, so even though the data-role will be correct, it has no effect.

[dioslaska]

Fixed, will be released in 2.15.0

[barsurfer]

Thanks for a quick fix, but still having a problem here:
if items collection is changed or a filter is applied, then data-role isn't working.
Can you take a look on this? Thanks, again.

[dioslaska]

The problem is, that the group headers should not be filtered at all. A possible solution is to use a custom filter, e.g.:

app.filter('myFilter', function () {
  return function (items, query) {
    var filtered = [];
    var re = new RegExp(query, 'i');
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (item.isGroupHeader || re.test(item.name)) {
        filtered.push(item);
      }
    }
    return filtered;
  };
})

And in the html:

<input ng-model="myQuery" />

<ul id="demo" mobiscroll-listview="options" mobiscroll-data="items | myFilter:myQuery">
    <li data-role="{{item.isGroupName ? 'list-divider' : ''}}">{{item.name}}</li>
</ul>

[barsurfer]

Agree with you. Group headers should not be filtered. But using a custom filter may cause to have multiple group headers in a row. And what about a situation when some new items are pushed to the mobiscroll-data or when the entire collection is replaced or changed?
Thanks!