Generate dynamic drop down with options from an Angular controller

Question

In my view file I've one button. I want to append drop down on click of button. Here is my code:

Controller File

$scope.appendnewrow = function (result) {
  var tr = '<select><option ng-repeat="'+site in
  result+'">'+site.name+'</option></select>';
  var temp = $compile(tr)($scope);
  angular.element(document.getElementById('123')).append(temp);
}

View File

<a ng-click="appendnewrow(result)">Add domain</a>

When I ran this code options did not populate.

try encapsulating the function in $scope.$apply(function(){ }) — bhanu.cs
– bhanu.cs, Commented Apr 3, 2017 at 13:15

Mistalis · Accepted Answer · 2017-04-03 12:52:02Z

1

This is not the Angular way do to that.

Considering your data is in $scope.result, you can display the array using ng-options:

<a ng-click="addRow(row)">Add domain</a>
<select ng-options="site as site.name for site in result"></select>

Add this function in your controller:

$scope.addRow = function(newRow) {
    $scope.result.push(newRow);
}

Here is a JSFiddle demo of what it could looks like.

answered Apr 3, 2017 at 12:52

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr. Engineer Over a year ago

No I don't want select tag in my view file.

Collectives™ on Stack Overflow

Generate dynamic drop down with options from an Angular controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related