Rendering Angularjs шаблона внутри контроллера

Question

Предположим, что у меня есть следующий angularjs шаблон

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

и у меня есть два текстовых полей и сохранить кнопки как

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

, когда пользователь вводит значения в ПгвЬЫате и LastName текстовых полей и нажмите на кнопке сохранения Я хочу, чтобы эти два значения были переданы в шаблон, и полученный html должен быть добавлен к существующему ul. Как я могу сделать это с угловым?

Answer 1

Вы можете создать директиву, чтобы динамически скомпилировать ваш шаблон и добавить его к ul, когда кто-то нажал кнопку сохранения, но это в основном целая цель ng-repeat.

Вот как это может работать с ng-repeat вместо:

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

 
angular.module('main').controller('MainCtrl', function ($scope) { 
 
\t $scope.names = []; 
 
    
 
\t $scope.save = function() { 
 
\t \t $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> 
 
    \t <li ng-repeat='name in names'>{{name.first}}  {{name.last}}</li> 
 
    </ul> 
 
</div>