How can i use ng-option for generate a select tag with optgroup tag RRS feed

  • Question

  • User1184281746 posted

    Hi dear ,

    I have a table like below:

    Categories (Id , Name,parentId)

    Id   Name  ParentId

    1   Book       NULL

    2   News      NULL

    3   Historic     1

    4   Politic       2

    I want to display this record on a Select with optgroup tag using ng-options or maybe ne-repeat  

    like below :

      <optgroup label="Book">
        <option value="3">Historic</option>
      <optgroup label="News">
        <option value="4">Politic</option>

    How can I use ng-options to generate somthing like above


    Monday, November 14, 2016 5:15 AM


  • User-6180675 posted

    You need to create a below JSON structure from your table data to act as a source for the dropdown.

    //Add the below data inside your controller
    $scope.options = [
                { name:'Historic', value:3,Category:"Book" },
                { name: 'Political', value:4,Category:"News"} 

    In the HTML add the the below code to use ng-options . The group by clause add the optgroup for the dropdown.

    <div ng-controller="ExampleController"> <!-- name of your controller -->
    <select ng-model="myCategory" ng-options="option.name as option.value group by option.Category for option in options">

    Check with the below links



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 14, 2016 8:14 PM