current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question
    
you want to open a modal window? –  V31 Sep 21 '14 at 14:24
    
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 Sep 21 '14 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 Sep 21 '14 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 Sep 21 '14 at 14:40
1  
That's fine, ng-repeat handles dynamic data just fine. –  bmceldowney Sep 21 '14 at 14:44

1 Answer 1

up vote 1 down vote accepted

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>

share|improve this answer
    
thanks a lot. great answer. Can u please tell me how I can attach edit and delete links with it. –  Muhammad Adeel Zahid Sep 21 '14 at 15:06
    
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. –  bmceldowney Sep 21 '14 at 15:10
    
didn't really get it. But I will try. thank you very much –  Muhammad Adeel Zahid Sep 21 '14 at 15:16
    
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 –  Muhammad Adeel Zahid Sep 21 '14 at 15:37
    
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. –  bmceldowney Sep 21 '14 at 15:45

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.