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

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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