Rendering Angularjs Template from within controller

Question

Suppose I have following angularjs template

<script type="text/ng-template" id="tmp">
<li>    
{{firstname}} {{lastname}}</li>
</script>

and I have two textboxes and a save button like

<input name="firstname" type="text"/>
<input name="lastname" type="text"/>
<button name="save" text="save"/>

when user enters values in firstname and lastname textboxes and press on save button I want these two values to be passed to the template and resultant html should be appended to an existing ul. How can I do it with angular?

no, i just want the values entered in form to be passed to template somehow and resultant html of template should append to an existing ul element that is present on the page. — Muhammad Adeel Zahid
– Muhammad Adeel Zahid, Commented Sep 21, 2014 at 14:26
you can change the state and pass the values to that state controller using services or as state params (if you using ui-router) — V31
– V31, Commented Sep 21, 2014 at 14:30
Is it not possible to just use an ng-repeat directive in your ul instead? It would be a lot easier. — bmceldowney
– bmceldowney, Commented Sep 21, 2014 at 14:40

bmceldowney · Accepted Answer · 2014-09-21 15:44:10Z

1

You could create a directive to dynamically compile your template and append it to the ul when someone hits the save button, but that's basically the whole purpose of ng-repeat.

Here's how it can work with an ng-repeat instead:

angular.module('main', []);

angular.module('main').controller('MainCtrl', function ($scope) {
	$scope.names = [];
  
	$scope.save = function () {
		$scope.names.push({first: $scope.firstname, last: $scope.lastname});
    }
})

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

<div ng-app="main" ng-controller='MainCtrl'>

  <input name="firstname" type="text" ng-model='firstname'/>
  <input name="lastname" type="text"ng-model='lastname'/>
  <button name="save" text="save" ng-click='save()'>save</button>
  
  <ul>
  	<li ng-repeat='name in names'>{{name.first}}   {{name.last}}</li>
  </ul>
</div>

edited Sep 21, 2014 at 15:44

answered Sep 21, 2014 at 14:53

bmceldowney

2,31514 silver badges19 bronze badges

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

6 Comments

Muhammad Adeel Zahid Over a year ago

thanks a lot. great answer. Can u please tell me how I can attach edit and delete links with it.

bmceldowney Over a year ago

Well, you've got an array that you're storing the results in, so you just need some UI elements that allow you to execute some $scope functions that modify items in that array. I suggest using ng-click directives to wire that up.

Muhammad Adeel Zahid Over a year ago

Ok, few things to ask. you haven't initialized app using angular.module and you have left ng-app directive to empty. can u please explain it a little bit

bmceldowney Over a year ago

It's a bad practice to set up code that way but it works for quick examples. I've edited my snippet to avoid confusion.

Muhammad Adeel Zahid Over a year ago

I have created a plunk plnkr.co/edit/77yxnpmx6rQXAhzFKcyN?p=preview with delete link and relevant delete function in controller but when data gets deleted the delete link does not disappear.

|

Collectives™ on Stack Overflow

Rendering Angularjs Template from within controller

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related