"Track by" does not work on multiple ui-select with objects

[artkoenig]

Here the example:
http://plnkr.co/edit/3KLlmX19Qx6meOk52Jyn?p=preview

Using track by in "Array of objects" example has no effect, angular generates $$hashKey fields for selected objects.

[abobwhite]

I am also seeing this issue. It's become very problematic.

[abobwhite]

It's hard to look back to the old files because the code was recently split into new files.

[johaven]

+1 :(

[nashant]

Is there going to be a fix for this some time soon? At the moment I'm having to resort to using angular.extend() to add the $$hashKey

[thefewminutes]

+1

[estvmachine]

Exist a partial solution for this problem?? @nashant.

[evillemez]

Yeah, this one kinda hurts... track by usually helps with performance, and I have a huge list of objects (languages) in a multiselect.

[catchshyam]

+1

[williamoliveira]

+1

[arseneoaa]

+1

[nadavsinai]

+1

[NetanelBasal]

+1

[morozovm]

+1

[logannc]

+1

[sidoruk-sv]

+1

[nadavivry]

+1

[n3wtn9]

+1

[noxan]

+1

[acabra85]

+1

[mlix11]

I hope my fix helps

[acabra85]

I have seen the pull request, #1383, it says the CI tests failed. Thanks for your posting

[mlix11]

The pull request fails because of the old build workflow. Other pull requests have the same issue.

[estvmachine]

:( good try!

[giacomolm]

+1
I created a filter as a workaround, but I would prefer to use 'track by' - mainly for performance issue (I didn't understand when the filters are called). Does it work the from the latest commit?

[artuska]

+1

[aaronroberson]

@artuska This fix landed in 0.16.0. Please see 6c52e41 and confirm or deny.

[fmoutawe]

Still occured in v0.16.1.

<ui-select-choices repeat="purposeOfVisit in purposeOfVisits | filter: {name: $select.search} track by purposeOfVisit.id"> doesn't delete $$hashkey in object.

[fromthemills]

Also on 0.17.1 still occurring.

[dunwho]

The first response here provided a solution for me. It seems that simply including "multiple" as an attribute rather than " multiple='true' " causes validation errors within select.js.

Also, if you track by $index with the above change it seems to work fine.

Original Article

I've spent some time digging into this. I've been able to get past the ngRepeat:dupes by making the following changes:

<ui-select multiple='true' ng-model='user.roles' theme='bootstrap'>
  <ui-select-match placeholder='Select a role...'> {{$item}} </ui-select-match>
  <ui-select-choices repeat='role in roles track by $index'> {{role}} </ui-select-choices>
</ui-select>

The big change here was from the simple attribute, multiple to multiple="true". The logic for determining if multiple is in play seems wrong (despite being woefully hard to read...sorry)?

[fromthemills]

Just gave it a test quick and this does indeed solve this issue...

[user378230]

The line

$select.multiple = (angular.isDefined(attrs.multiple)) ? (attrs.multiple === '') ? true : (attrs.multiple.toLowerCase() === 'true') : false;

Doesn't exist.

$select.multiple = true

Is set in the uiSelectMultiple directive itself.

[laurenmacam]

+1

[agpt]

👍 for me, I have two ui-select in my view. very strange that for one instance its working fine, but for its sibling ui-select, it is not. any fixes ?

For me it worked, when I renamed the variable and added track by in another ng-repeat in which I was using the same object array.

// $ctrl.reportConfig.filters renamed to filterType

<ui-select multiple ng-model="$ctrl.reportConfig.filterType" sortable="true" close-on-select="false" theme="bootstrap" title="Choose a Filter" on-select="$ctrl.onSelectFilter($item, $model)">
          <ui-select-match allow-clear="true" placeholder="Select a Filter in the list...">{{$item.alias}} &lt;{{$item.fieldSets.fields.alias}}&gt;</ui-select-match>
          <ui-select-choices repeat="f in $ctrl.filters | filter: $select.search track by f.x.y.alias" group-by="'alias'">
            <div ng-bind-html="f.x.y.alias | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>

// I am using filterType array to generate another set of ui-select here

    <div class="form-group" ng-repeat="field in $ctrl.reportConfig.filterType track by field.alias"> // <= I added track by field.alias here
      <label for="" class="col-md-2 control-label"></label>
      <div class="col-md-4">
        <ui-select multiple ng-model="$ctrl.reportConfig.x[field.name]" close-on-select="false" title="Choose {{field.alias}}" on-select="$ctrl.onSelectFilterFields($item, $model)">
          <ui-select-match placeholder="Select {{field.alias}} in the list...">{{$item.name}}</ui-select-match>
          <ui-select-choices repeat="fil in $ctrl.getData(field.name) | filter: $select.search track by fil.name" group-by="'alias'"> // <= and added another track by here as well
            <div ng-bind-html="fil.name | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>
      </div>
    </div>

[apodznoev]

@agupta-q4 Thank you man for a code! It didn't resolved the issue with a hash key but fixed my problem with filtering using track by =)

[iMomen]

+1