渲染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模板從控制器內

回答

相關問題