angularjs - コントローラー内から Angularjs テンプレートをレンダリングする

Question

次のangularjsテンプレートがあるとします

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

2つのテキストボックスと次のような保存ボタンがあります

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

ユーザーが名と姓のテキストボックスに値を入力して保存ボタンを押すと、これら2つの値がテンプレートに渡され、結果のhtmlが既存の.htmlに追加されulます。angularでどうすればできますか？

Answer 1

テンプレートを動的にコンパイルし、ul誰かが保存ボタンを押したときにそれを追加するディレクティブを作成することもできますが、基本的にはそれがng-repeat.

ng-repeat代わりにを使用する方法は次のとおりです。

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>