user630209
user630209

Reputation: 1207

ui-select not binding values as expected

Problem with converting this select box to multiple select box.

 <select  style="width: 100%;" ng-model="vaccjobctrl.vacc.vaccination" 
                                     ng-options="vacctype.vaccinationId as vacctype.vaccinationName for vacctype in vaccjobctrl.vaccinationMast"
                                     class="form-control field-size ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" name="vaccinationName"
                                     id="vaccinationName" required >
                                     <option value="">--SELECT--</option>
                                     <option value="{{vacctype.vaccinationId}}">{{vacctype.vaccinationName}}</option>
                         </select>

Tried converting this to multiple selection ui, but its not returning as expected

<ui-select tagging="tagTransform" ng-model="vm.user.instId" theme="bootstrap"  id="institute" name="institute"  append-to-body="false" ng-required="true">
                            <ui-select-match placeholder="Select Vaccination..."> <span
                                ng-bind="$select.selected.vaccinationName"></span> 
                            </ui-select-match> 
                                <ui-select-choices repeat="vaccine in (vaccjobctrl.vaccinationMast | filter: $select.search) track by vaccine.vaccinationId">

                            <span ng-bind="item.vaccinationName"></span> 
                            <!-- <div ng-bind-html="item.instName | highlight: $select.search"></div> --></ui-select-choices> </ui-select> 

This is the json which is stored in vaccjobctrl.vaccinationMast.

{
  "code": 0,
  "message": "Total 6 records found",
  "result": [
    {
      "vaccinationId": 1,
      "vaccinationName": "vacc 1",
      "vaccinationNameAr": null
    },
    {
      "vaccinationId": 2,
      "vaccinationName": "vacc 2",
      "vaccinationNameAr": null
    },
    {
      "vaccinationId": 3,
      "vaccinationName": "vacc 3",
      "vaccinationNameAr": null
    },
    {
      "vaccinationId": 4,
      "vaccinationName": "vacc 4",
      "vaccinationNameAr": null
    },
    {
      "vaccinationId": 5,
      "vaccinationName": "vacc 5",
      "vaccinationNameAr": null
    },
    {
      "vaccinationId": 6,
      "vaccinationName": "vacc 6",
      "vaccinationNameAr": null
    }
  ]
}

fiddle http://jsfiddle.net/uhgvLjgp/44/

Upvotes: 0

Views: 282

Answers (1)

John
John

Reputation: 112

you are not accessing the results array within your json in your ng-options

 ng-options="vacctype.vaccinationId as vacctype.vaccinationName for vacctype in vaccjobctrl.vaccinationMast.result"

Upvotes: 0

Related Questions