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"/>

当用户在firstname和lastname文本框中输入值并按下save按钮时，我希望将这两个值传递给模板，并将结果html附加到现有的ul。我怎么能用角度来做呢？

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>

从控制器内渲染Angularjs模板

1 个答案: