渲染Angularjs模板从控制器内

假设我有以下angularjs模板渲染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。我怎样才能做到这一点？

来源

2014-09-21 Muhammad Adeel Zahid

要打开一个模式窗口？ – V31 2014-09-21 14:24:26

不，我只是希望在表单中输入的值以某种方式传递给模板，模板的结果html应该附加到页面上现有的'ul'元素。 – 2014-09-21 14:26:17

您可以更改状态并将值通过服务或状态参数传递给状态控制器（如果您使用ui路由器） – V31 2014-09-21 14:30:15

您可以创建一个指令来动态编译您的模板，并在有人点击保存按钮时将其附加到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>

来源

2014-09-21 14:53:51 bmceldowney

非常感谢。很好的答案。你能告诉我如何附加编辑和删除链接。 – 2014-09-21 15:06:35

好吧，你有一个数组，你正在存储结果，所以你只需要一些UI元素，允许你执行一些'$ scope'函数来修改该数组中的项目。我建议使用'ng-click'指令来连接它。 – bmceldowney 2014-09-21 15:10:49

真的没有得到它。但是我会努力的。非常感谢你 – 2014-09-21 15:16:05

渲染Angularjs模板从控制器内

回答

相关问题