Child details not able to display in select using AngularJS

Question

I have created an AngularJS application with select box, The application with select is working fine, but the problem is that I want option group like thing in select which is selectable, since i am aware that the option group feature in select is not selectable, I made similar stuff using CSS, when i put the values statically its working fine, but dynamically I am not able to show the child details

JSFIDDLE

can anyone please tell me some solution for this

angular.module('Test1',[])

.controller('Foo', function($scope) {

$scope.regionsData = {
  "regions": [
    {
      "regionId": 15,
      "regionName": "Kerala",
      "places": [
        {
          "placeId": 21,
          "placeName": "Trivandrum"
        },
        {
          "placeId": 22,
          "placeName": "Kollam"
        }]
    },
    {
      "regionId": 16,
      "regionName": "Chennai",
      "places": [
        {
          "placeId": 23,
          "placeName": "Kanchipuram"
        },
        {
          "placeId": 24,
          "placeName": "Guindy"
        }]
    }
    ]
}
    
});

.region {
    font-weight: bold
}
.place {
    padding-left: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Test1">
    <div ng-controller="Foo">
      
<b>DYNAMIC<b><br>
HOW CAN I DISPLAY THE CHILD DETAILS<br>
        <select ng-model="data.selectedDocumentType" class="region" ng-options="region as region.regionName for region in regionsData.regions"> </select> 
        
      
<br><br><b>STATIC<b><br>
THIS IS WHAT I WANT TO ACHIEVE<br>
        <select> 
            <option class="region">Kerala</option>
            <option class="place">Trivandrum</option>
            <option class="place">Kollam</option>
            <option class="region">Chennai</option>
            <option class="place">Kanchipuram</option>
            <option class="place">Guindy</option>
        </select> 
    </div>
</div>

so u want both `regionName` and `placeName` to populate in select ? — iJade, Sep 18 '14 at 09:25
It doesn't really look like an organized way of doing this thing. Are u sure u want it this way?? — iJade, Sep 18 '14 at 09:27
yes, if not is there any other alternative way to achieve that — Alex Man, Sep 18 '14 at 09:28
an alternative way would be to re arrange your JSON data. Would that be possible — iJade, Sep 18 '14 at 09:30
You can do something like http://jsfiddle.net/satpalsingh/wb4edgs4/. Just note, Here I have used `optgroup` otherwise you have to change JSON structure — Satpal, Sep 18 '14 at 09:32
@Satpal there i cant select the optgroup, actually i want optgroup selectable — Alex Man, Sep 18 '14 at 09:34
its comming from an external service so, how can i change the json structure — Alex Man, Sep 18 '14 at 09:38

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

FYI, google chrome doesn't allow adding css to option elements, see this answer

I found this to work:

example

as mentioned in the comments, I re formatted the data in a simpler fashion, using loops on the original variable:

$scope.test = [];
$scope.regionsData.regions.forEach(function(val, key) {
  $scope.test.push(val.regionName);
  val.places.forEach(function(val, key){
    $scope.test.push(val.placeName);
  })
})

and in html:

<select ng-model="data.selectedDocumentType" class="region" ng-options="region for region in test"> </select>

to overcome chrome's issue, and apply css, a better approach is to use <ul> with <li> to make the dropdown.

here's an example of how to create the html, making in look like a dropdown is out of the scope of your question:

turn select into unordered-list fiddle

see this question on how to turn a ul into a dropdown

edited May 23 '17 at 11:49

Community

1
1

answered Sep 18 '14 at 10:19

Nitsan Baleli

5,393
3
30
52

thanks for the answer, but i need classes 'region'-'place' in the option elements – Alex Man Sep 18 '14 at 10:24
you are right in chrome css cant be applied to option, can you please tell me some other alternatives – Alex Man Sep 18 '14 at 10:27
with
wont be in the form of drop down right

Alex Man

Sep 18 '14 at 10:38

@AlexMan there are ways to make the ul look like a dropdown, and even far more better looking. Ive updated the answer. please review, and accept if it answered your question. – Nitsan Baleli Sep 18 '14 at 10:43

Child details not able to display in select using AngularJS

1 Answers1