angularjs - 从控制器内渲染 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"/>

当用户在名字和姓氏文本框中输入值并按下保存按钮时，我希望将这两个值传递给模板，并将生成的 html 附加到现有的ul. 我怎么能用角度来做到这一点？

Answer 1

您可以创建一个指令来动态编译您的模板并将其附加到ul有人点击保存按钮时，但这基本上是ng-repeat.

以下是它如何与 an 一起使用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>