AngularJS: ui-select bind data back to the select

Question

I am using Angular js 1.3.4 version and using ui-select.

I am binding complex multilevel JSON array of objects to this ui-select which works fine. So the user can select any options in this select. When the user saves other data and this select data I am saving this info in the database. All this works fine.

What I am having issues is how to bind back data to this. It might not be the issue of ui-select only as I am not able to bind back the data to the textbox as well.

So below is the json(after some modification) which I get from my db:

{
   "input1":{
      "set1":{
         "source":"uat1",
         "value":"value1"
      },
      "set2":{
         "source":"uat",
         "value":"value2",
         "options":[
            {
               "name":"option1"
            },
            {
               "name":"option2"
            }
         ]
      }
   },
   "input2":{
      "set3":{
         "source":"uat1",
         "value":"value3"
      },
      "set4":{
         "source":"uat",
         "value":"value4",
         "options":[
            {
               "name":"option3"
            },
            {
               "name":"option4"
            }
         ]
      }
   }
}

Below is my directive where I try to bind back the data:

 <div class="form-group" ng-repeat="(name, set) in sets">
    <label>{{name}}</label>
    <ui-select name="{{inputName + $index}}" ng-model="set.value" theme="bootstrap" ng-if="set.source == 'uat'">
        <ui-select-match placeholder="Set">{{set.value.name}}</ui-select-match>
        <ui-select-choices repeat="ds in set.options | filter: $select.search track by $index">
            <div ng-bind-html="ds.name | highlight: $select.search"></div>       
        </ui-select-choices>
    </ui-select>
    <input type="text" ng-if="set.source == 'uat1'" name="{{inputName + $index}}" ng-model="set.value" />
</div>

The result of above is that for my ui-select I can see the options which means it is binded correctly with my incoming json data. The issue is the value displayed. I cannot see anything select in my ui-select and my textbox is also empty.

Since the model of each of above is ng-model = 'set.value' I am passing this in my json. So I thought this would work but it does not.

I believe I am missing something in my Json. Can anyone point out whats missing here so that I can see the value field in my json to the corresponding control.

Thanks.

nash11 · Accepted Answer · 2019-08-19 09:58:35Z

In AngularJS ui-select, the ui-select-match directive is used to show which value is selected and should display in the textbox. You are displaying the wrong data here (set.value.name). You need to instead display the selected value using $select.selected.name.

<ui-select-match placeholder="Set">{{$select.selected.name}}</ui-select-match>

Your ui-select-choices are objects so if you want to set a default value from the controller, your value needs to be an object that exists in the options. So you can set a default value to the ui-select by assigning the right value to your ng-model set.value.

"value": {
    "name":"option1"
}

Collectives™ on Stack Overflow

AngularJS: ui-select bind data back to the select

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related