CODEWITHSUNDEEP
javascriptangularjsjsonionic-framework
Neotrixs
Neotrixs

Reputation: 2537

How to show json data as optgroup with multiple-select in Select Option in angularjs

I try to show JSON data as optgroup option with multi-select in angularjs but not get success

In Html it shown as:

<select ng-model="industrycatslect" ng-change="industryslected(industrycatslect)" multiple   ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory track by skilldata.id">
    <option value="">Select Location</option>
</select>

JSON shown as:

"skillCategory": [
        {
            "id": "8",
            "group": "Technology",
            "value": " Software Engineering"
        },
        {
            "id": "17",
            "group": "Technology",
            "value": "Collaboration and Content Management"
        },
        {
            "id": "22",
            "group": "Functions",
            "value": "Procurement"
        },
        {
            "id": "23",
            "group": "Functions",
            "value": "Product"
        }
    ],

Please Help me I think I done some mistake in "ng-options".

Upvotes: 0

Views: 757

Answers (2)

Icycool
Icycool

Reputation: 7179

Not much changes except removing the track by part

angular.module('test', []).controller('Test', Test);

function Test($scope) {
    $scope.skillCategory = [
        {
            "id": "8",
            "group": "Technology",
            "value": " Software Engineering"
        },
        {
            "id": "17",
            "group": "Technology",
            "value": "Collaboration and Content Management"
        },
        {
            "id": "22",
            "group": "Functions",
            "value": "Procurement"
        },
        {
            "id": "23",
            "group": "Functions",
            "value": "Product"
        }
    ]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app='test' ng-controller='Test'>
  <select ng-model="industrycatslect" multiple ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory">
    <option value="">Select Location</option>
  </select>
  
  <br>
  {{industrycatslect}}
</div>

Upvotes: 1

ZombieChowder
ZombieChowder

Reputation: 1204

I think that this might help you out. There was an error in how you define your skillCategory JSON data. I hope that this JSFiddle helps out. It's not sorted by ID but it displays the elements as intended:

Answer 1

Upvotes: 1

Related Questions