angular js ui-select option repeat not working for object array

Question

I am using Angular ui-select. My model & ui-select option array are different. While changing value its not updated and not displaying options. I am storing the selected object Id in "pmpo", I want to show the selected object from the pmptnk object array when loading. But is not working. Some one tell what I am doing wrong.

My object from Model

  pmpo:877
  pmptnk:[0:
    632:{id: "632",  pid: "2993", ESID: "9154", lb1: "Undddd", lb2: "219"}
    877:{id: "877",  pid: "2993", ESID: "9154", lb1: "Pcddd", lb2: "29"}
    654:{id: "654",  pid: "2993", ESID: "9154", lb1: "kukuu", lb2: "246"}]

In view file

 <div ng-if="item.pmptnk.length > 0">
    <ui-select ng-model="item.pmpo" click-out-side="closeThis($event)">
    <ui-select-match placeholder="Select " search-placeholder="Filter Tanks" 
    uib-tooltip="{{item.pmpo > 0 ? $select.selected.lb1 : 'Select Tank'}}" tab-select="true">
         <span ng-bind="$select.selected.lb1"></span>
    </ui-select-match>
    <ui-select-choices repeat="obj.tid as obj in (item.pmptnk[item.pmpo])">
        <span ng-bind="obj.lb1"></span>
    </ui-select-choices>
    <ui-select-no-choice>
      No results matched "{{$select.search}}"
    </ui-select-no-choice>
    </ui-select>

</div>

lealceldeiro · Accepted Answer · 2017-07-20 13:51:45Z

1

As per docs of ui-select-choices, the repeat attribute

Specify the list of items to provide as choices. Syntax is similar to ngRepeat.

And according to the ng-repeat doc

It is possible to get ngRepeat to iterate over the properties of an object using the following syntax:
<div ng-repeat="(key, value) in myObj"> ... </div>

So, from this, we can conclude that you should change your syntax from this:

<ui-select-choices repeat="obj.tid as obj in (item.pmptnk[item.pmpo])">

to this:

<ui-select-choices repeat="(key, value) in (item.pmptnk[item.pmpo])">

where value will be 877, 2993 and so on and key will be id , pid and so on.

answered Jul 20, 2017 at 13:51

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

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

6 Comments

Kavitha Velayutham Over a year ago

Thanks for the reply. I tried as you mentioned. No luck. <ui-select-choices repeat="(key, value) in (item.pmptnk[item.pmpo])"> <span ng-bind="lb1"></span>

lealceldeiro Over a year ago

Make sure (item.pmptnk[item.pmpo]) is actually an object.

Kavitha Velayutham Over a year ago

In my question, I showed the structure of item.pmptnk . item.pmptnk is an array of object, with the key item.pmpo

Kavitha Velayutham Over a year ago

console log: docs.angularjs.org/error/ui.select/…

lealceldeiro Over a year ago

This message indicates this can be one of two things: one: the repeat attribute syntax is similar to ngRepeat, but definitely it DOES NOT accept the ability to iterate over the properties of an object (not like ngRepeat) or two: there is some error in the structure of item.pmptnk[item.pmpo]. If it would be the first case, these guys of ui-select should make that clearer in the docs and you will have to change the structure of item.pmptnk[item.pmpo]. If it not anyway you should change the structure of item.pmptnk[item.pmpo] in order to get this fixed.

|

boop_the_snoot · Accepted Answer · 2022-04-28 09:30:01Z

I worked on your code.I tried it out in different way. Below is my code snippet:

<div ng-if="item.pmptnk.length > 0">
  <ui-select ng-model="item.selected" click-out-side="closeThis($event)">
    <ui-select-match
      placeholder="Select "
      search-placeholder="Filter Tanks"
      uib-tooltip="{{item.pmpo > 0 ? $select.selected.lb1 : 'Select Tank'}}"
      tab-select="true"
    >
      <span ng-bind="$select.selected.lb1"></span>
    </ui-select-match>
    <ui-select-choices repeat="obj.tid as obj in (item.pmptnk)">
      <span ng-bind="obj.lb1"></span>
    </ui-select-choices>
    <ui-select-no-choice>
      No results matched "{{$select.search}}"
    </ui-select-no-choice>
  </ui-select>
</div>

and i changed my model as below:

$scope.item = {};
$scope.item.pmpo = 877;
$scope.item.pmptnk = [
  { id: "632", pid: "2993", ESID: "9154", lb1: "Undddd", lb2: "219" },
  { id: "877", pid: "2993", ESID: "9154", lb1: "Pcddd", lb2: "29" },
  { id: "654", pid: "2993", ESID: "9154", lb1: "kukuu", lb2: "246" },
];
for (var i = 0; i < $scope.item.pmptnk.length; i++) {
  if ($scope.item.pmptnk[i].id == $scope.item.pmpo) {
    $scope.item.selected = $scope.item.pmptnk[i].tid;
    break;
  }
}

This worked fine for me.

Abdul Aleem Khan · Accepted Answer · 2017-07-20 13:33:24Z

0

Should not it be ng-repeat instead of just repeat?

 <ui-select-choices repeat="obj.tid as obj in (item.pmptnk[item.pmpo])">

change this line to the following one

<ui-select-choices ng-repeat="obj.tid as obj in (item.pmptnk[item.pmpo])">

It will fix the issue hopefully.

answered Jul 20, 2017 at 13:33

Abdul Aleem Khan

839 bronze badges

3 Comments

lealceldeiro Over a year ago

Are you asking or answering?

Kavitha Velayutham Over a year ago

@abdulAleem Khan Repeat will work. The problem is about object array loop. If I change my array to simple object its works.

lealceldeiro Over a year ago

According to the docs it should be repeat, not ng-repeat

Collectives™ on Stack Overflow

angular js ui-select option repeat not working for object array

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related