CODEWITHSUNDEEP
javascriptangularjsselectangularjs-ng-repeatng-options
Rinrub
Rinrub

Reputation: 127

Nested ng-option inside angular ng-repeat

Im currently trying to nest a <select> inside a div with a ng-repeat

something like this:

       <li ng-repeat="item in items >
            <div class="row">
                <div class="col-xs-7">
                    <span ng-bind="item.Name"></span>
                </div>
                <div class="col-xs-4 modal-body--ul--li__dropdown_container">
                    <select ng-model="typemodel" >
                        <option ng-repeat="usertype in item.userGroups"></option>
                    </select>
                </div>
                <div class="col-xs-1">
                    <a ng-click="add(item)"></a>
                </div>
            </div>
        </li>

In the controller im adding the item to a new list with selected items. I also want to add the value from the dropdown as a new value to the list in the controller.

$scope.add = function (item) {

    //New value with the value from the dropdown
    item.recipientType = typemodel;
    $scope.selected.push(item);
};

The list :

$scope.items = [  
     {           
        "Name":"Name1",
        "userGroups":[
            { "type": "gruop1" },
            { "type": "gruop2" },
            { "type": "group3" }            
        ]
     },
     {  
        "Name":"Name2",
        "userGroups":[
            { "type": "gruop1" },
            { "type": "gruop2" },
            { "type": "group3" }            
        ]
     }
    ]

In short i need the selected value from the dropdown when i hit the "add", the value of the current typemodel.

This is how it looks now, but it dont work. I know i have to get the correct model and maybe track the items list by $index, but after searching the web the whole day for a solution, im still stuck!

All help is appreciated.

-Thanks!

ps. please comment if something is missing from the question, or something more is needed to solve this.

Upvotes: 0

Views: 1709

Answers (1)

Rebornix
Rebornix

Reputation: 5270

First, change your dropdown list to 

<select ng-options="usertype in item.userGroups" ng-model="item.recipientType">

Then when you trigger the add function, item's property recipientType is already set.

$scope.add = function (item) {
    console.log(item.recipientType);
    $scope.selected.push(item);
};

Upvotes: 1

Related Questions