Generate HTML dynamically on button click in Angular js

Question

I have a select box. I want to generate the same on a 'Add New' button click.

View

<button id="sample_editable_1_new" class="btn sbold green" ng-mousedown="count = count + 1" ng-click="Get_toolNames()">Add New
  <i class="fa fa-plus"></i>
</button>

<select class="bs-select form-control" name="tool_id" ng-model="Tooldata.tool_name" ng-options="t.tm_id as t.tm_name for t in tools" required>
  <option value="">Select</option>
</select>

How can I generate the same on this button click?

Read it, man! stackoverflow.com/questions/8674618/…

Vuong
– Vuong

2016-08-06 08:23:54 +00:00
Commented Aug 6, 2016 at 8:23 — Vuong
– Vuong, Commented Aug 6, 2016 at 8:23

halfer · Accepted Answer · 2017-09-19 14:18:24Z

2

If you have

<button id="sample_editable_1_new" class="btn sbold green" ng-mousedown="count = count + 1" ng-click="buttonClick"> Add New
                                <i class="fa fa-plus"></i>
 </button>

In your controller you can inject and use $compile service.

$scope.buttonClick = function(){
   var el = angular.element(/* Here your element */);
   el.append( '<select class="bs-select form-control" name="tool_id" ng-model="Tooldata.tool_name"  ng-options="t.tm_id as t.tm_name for t in tools" required>' + 
                     '<option value="">Select</option>' + '</select>')
   $compile(el)($scope);
}

Change your logic to get the data and the element you want:

For more see $compile.

Update

var sample_2_tbody = angular.element('#sample_2 tbody');
$compile(sample_2_tbody)($scope);

How to inject a service in the controller:

app.controller('MyController', ['$scope', '$compile', function($scope, $compile){

}])

edited Sep 19, 2017 at 14:18

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Aug 6, 2016 at 8:29

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

5 Comments

robins Over a year ago

i have an error in console $compile is not defined

Suren Srapyan Over a year ago

@robins you must inject it in the controller function. Try the same way how you inject the $scope

robins Over a year ago

ok..thanks for response.i'm new thats why i'm asking..how to set multiple value as selected in dropdown list

Suren Srapyan Over a year ago

@robins add selected attribute to each item you want

robins Over a year ago

Let us continue this discussion in chat.

Hitmands · Accepted Answer · 2016-08-06 08:48:43Z

In AngularJS views are just a model reflection and their scope is only for data presentation. That's mean you never need to manually copy a DOM Element, you just need to operate on the bound model.

function TestCtrl($scope, select) {
  copy = () => angular.copy(select);
  
  $scope.selects = [copy()];
  $scope.values = {};
  
  $scope.add = () => {
    //$scope.selects.unshift(select); // add at the beginning
    $scope.selects.push(copy()); // add at the end
  };
}

angular
  .module('test', [])
  .value('select', [{
    id: 1,
    label: 'aLabel',
    subItem: { name: 'aSubItem' }
  }, {
    id: 2,
    label: 'bLabel',
    subItem: { name: 'bSubItem' }
  }])
  .controller('TestCtrl', ['$scope', 'select',  TestCtrl])
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <article ng-controller="TestCtrl">
    <button ng-click="add($event)">Add</button>
    <hr>
    
    <div ng-repeat="select in selects track by $index">

      <select ng-model="values[$index]" ng-options="t as t.label for t in select">
      </select>
    
    </div>
    
    <hr>
    <pre><code ng-bind="values | json"></code></pre>
  </article>
</section>

Collectives™ on Stack Overflow

Generate HTML dynamically on button click in Angular js

2 Answers 2

Update

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related