how to populate select option in angular

Question

I have a dynamically created data. Based on this I am creating a form. But problem is option is not added to to the select. What is wrong in this.

customerB :
        {
            rows:3,
            columns: 2,
            name: 'customerB',
            fields:
            [
                {type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}
            ], 
        }

HTML

<div class="rows" ng-repeat="field in customerB">
     <div class="columns" ng-repeat="newvalue in field"> 
          <div class="controls" ng-switch="newvalue.type"> 
             <div class="form-group"> 
               <label class="control-label">{{newvalue.label}}</label> 
               <select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check">
               </select>
             </div> 
          </div> 
     </div> 
</div>

<div class="rows" ng-repeat="field in customerB"> <div class="columns" ng-repeat="newvalue in field"> <div class="controls" ng-switch="newvalue.type"> <div class="form-group"> <label class="control-label">{{newvalue.label}}</label> <select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check"></select> </div> </div> </div> </div> — Aditya Kumar
– Aditya Kumar, Commented Apr 7, 2017 at 7:19
And what fields with what values would you like to see in the <select> options? — JasperZelf
– JasperZelf, Commented Apr 7, 2017 at 7:26

haMzox · Accepted Answer · 2017-04-07 07:23:14Z

2

You got an object which got an array, inside the array you got another array which is not correctly manipulating.
Try understanding the following code snippet:
HTML:

<select name="repeatSelect" id="repeatSelect">
  <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>

JS

availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ]

OR follow the link: https://docs.angularjs.org/api/ng/directive/select

answered Apr 7, 2017 at 7:23

haMzox

2,1091 gold badge15 silver badges25 bronze badges

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

3 Comments

Aditya Kumar Over a year ago

Inside the json, what is the best way to create the options ?

Aditya Kumar Over a year ago

what changes should i made in this object -

Aditya Kumar Over a year ago

{type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}

Sachila Ranawaka · Accepted Answer · 2017-04-07 07:26:14Z

This assumption might be wrong but I think in here ng-repeat="field in customerB" you are accessing object property directly without the scope variable. So you need to add whatever the scope variable name in front of the property name.

<div class="rows" ng-repeat="field in obj.customerB">

Other than that code you provided work perfectly.

Demo

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.obj = { customerB :
        {
            rows:3,
            columns: 2,
            name: 'customerB',
            fields:
            [
                {type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}
            ], 
        }}
         

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="rows" ng-repeat="field in obj.customerB">
   <div class="columns" ng-repeat="newvalue in field">
      <div class="controls" ng-switch="newvalue.type">
         <div class="form-group"> <label class="control-label">{{newvalue.label}}</label> <select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check"></select> </div>
      </div>
   </div>
</div>
</div>

Collectives™ on Stack Overflow

how to populate select option in angular

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related