Angulajs Nested loop of select option from array

Question

Hi I am using angularjs to build a form I have a array return from php like this and I want to build a form like this from the array.

<b>Company</b>
<select ng-model="attributs[]">
 <option>Chinese</option>
 <option>Japanese</option>
 </select>
 
 <b>Color</b>
<select ng-model="attributs[]">
 <option>Black</option>
 <option>Red</option>
 </select>

[
  {
      id: 1,
      name: "Company",
      attribute_values:[
        {
            id: 1,
            name: "Chinese"
        },
        {
            id: 2,
            name: "Japanese"
        }
    ]
  },
  {
      id: 2,
      name: "Color",
      attribute_values:[
        {
            id: 4,
            name: "Black"
        },
        {
            id: 5,
            name: "Red"
        }
    ]
  }
]

I want all the selected value from the select option I tried this but not working. Thank you in advance.

<div ng-repeat="attrib in attributes.data">
  <label class="col-sm-5 col-form-label"><% attrib.name %></label>
   <div class="col-sm-5">                                       
     <select ng-model="attrib.attributeSelected" ng-options="atb.value as atb.name for atb in attrib.attribute_values">
    </select>
    </div>
 </div>

score 0 · Answer 1 · answered Aug 14 '20 at 12:22

You didn't mention about the output format how do you want after selection. I did a workaround, it will create a property selectedOption inside every attribute, to hold the value of selected option at the corresponding attribute.

<div ng-repeat="attrib in data">
  <label class="col-sm-5 col-form-label">{{attrib.name}}</label>
   <div class="col-sm-5">                                       
     <select ng-model="attrib.selectedOption">
       <option default selected disabled value="">Select</option>
       <option ng-repeat="x in attrib.attribute_values" value={{x.id}}>{{x.name}}</option>
    </select>
    </div>
 </div>

The property selectedOption will be inserted like below,

[{
    "id": 1,
    "name": "Company",
    "attribute_values": [{
        "id": 1,
        "name": "Chinese"
    }, {
        "id": 2,
        "name": "Japanese"
    }],
    "selectedOption": "1"
}, {
    "id": 2,
    "name": "Color",
    "attribute_values": [{
        "id": 4,
        "name": "Black"
    }, {
        "id": 5,
        "name": "Red"
    }],
    "selectedOption": "5"
}]

Output format is perfect but {{selectedOption}} not showing selected value. — sanu, Aug 14 '20 at 14:21
Selected data only showing inside ng-repeat="attrib in attributes.data" so i can't pass this data along with form submit any help will be appreciated — sanu, Aug 14 '20 at 14:41
Finally I Found the solution It got push to attributes array — sanu, Aug 14 '20 at 16:00

Angulajs Nested loop of select option from array

1 Answers1