locked
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 :

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

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

    Thanks

    Monday, November 14, 2016 5:15 AM

Answers

  • 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">
     
    </select>
    
    </div>

    Check with the below links

    https://docs.angularjs.org/api/ng/directive/ngOptions

    http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx

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