如何在单击按钮时在angular .js中动态添加行?

帕拉维·沙玛(Pallavi Sharma)

当我获取静态数据时,我正在angular.js中创建一个列表视图,我能够在给定的小提琴中创建list.as。http://jsfiddle.net/65Cxv/50/。但是换句话说,我需要动态生成行,我需要在用户单击按钮时创建行。我需要创建具有相同文本示例(“ List”)但ID不同的列表像(“ 0”,“ 1”,“ 2” ...等)。是否可以生成列表..?我在这里尝试做..

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<ul ng-controller="ListController">
    <li>
        <a ng-click=></a>
    </li>
</ul>



</body>

</html>

JS代码:

var myApp = angular.module('myApp',[]);

myApp.controller('ListController', function($scope) {
  alert('--')
]);
查理

您可以通过将新对象推送到数据数组中来添加数据模型:

$scope.items = [
    {name: 'item1', content: 'content1'},
    {name: 'item2', content: 'content2'},
    {name: 'item3', content: 'content3'}
];
/* bind this to `ng-model` of 2 inputs in html*/
$scope.activeItem={ name: '', content:''}

$scope.addItem=function(){
   $scope.items.push( $scope.activeItem);
   $scope.activeItem={} /* reset active item*/

}

在html中使用

<button ng-click="addItem()">Add</button>

DEMO

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在单击按钮时在angular .js中动态添加行?

来自分类Dev

如何在JTable中动态添加行

来自分类Dev

如何在Bootstrap中动态添加行

来自分类Dev

如何在listveiw中动态添加行?

来自分类Dev

如何在Android中的tableLayout中动态添加行

来自分类Dev

如何在Android中的tableLayout中动态添加行

来自分类Dev

如何在Java FX中的gridpane上动态添加行?

来自分类Dev

如何在UWP中向Datagrid动态添加行?

来自分类Dev

如何在动态添加行中克隆方法?

来自分类Dev

Ionic 3 - 单击按钮时动态添加行

来自分类Dev

如何在按钮单击时动态添加指令

来自分类Dev

单击按钮时如何在js中获得活动按钮

来自分类Dev

在Angular 7中添加行以动态形成表单

来自分类Dev

单击Codeigniter中的添加按钮时如何在动态表中获取序列号

来自分类Dev

我如何在使用 angular2 单击添加按钮时获得表单模型

来自分类Dev

如何在单击按钮时在angularjs中动态添加输入字段?

来自分类Dev

AngularJS如何在单击按钮时在页面中动态添加/删除指令

来自分类Dev

如何在VueJS中单击按钮B时启用按钮A?

来自分类Dev

单击不应该发送表单的按钮时,如何在Angular中关闭表单验证

来自分类Dev

在 Angular 2 中,如何在单击按钮时聚焦到 div 的底部

来自分类Dev

如何在Angular的子组件中单击按钮时为父组件属性设置值

来自分类Dev

通过单击mat-table angular8中上一行的按钮来动态添加行?

来自分类Dev

如何在动态添加到html表的行中添加行号

来自分类Dev

在Angular js中单击按钮时动态生成HTML

来自分类Dev

如何在按钮单击事件中向数据表添加行?

来自分类Dev

如何在单击按钮时删除动态创建的视图

来自分类Dev

如何在单击按钮时动态创建数据表

来自分类Dev

jQuery - 向单击其他按钮时动态创建的按钮添加行为

来自分类Dev

如何在单击按钮时添加/删除片段?

Related 相关文章

  1. 1

    如何在单击按钮时在angular .js中动态添加行?

  2. 2

    如何在JTable中动态添加行

  3. 3

    如何在Bootstrap中动态添加行

  4. 4

    如何在listveiw中动态添加行?

  5. 5

    如何在Android中的tableLayout中动态添加行

  6. 6

    如何在Android中的tableLayout中动态添加行

  7. 7

    如何在Java FX中的gridpane上动态添加行?

  8. 8

    如何在UWP中向Datagrid动态添加行?

  9. 9

    如何在动态添加行中克隆方法?

  10. 10

    Ionic 3 - 单击按钮时动态添加行

  11. 11

    如何在按钮单击时动态添加指令

  12. 12

    单击按钮时如何在js中获得活动按钮

  13. 13

    在Angular 7中添加行以动态形成表单

  14. 14

    单击Codeigniter中的添加按钮时如何在动态表中获取序列号

  15. 15

    我如何在使用 angular2 单击添加按钮时获得表单模型

  16. 16

    如何在单击按钮时在angularjs中动态添加输入字段?

  17. 17

    AngularJS如何在单击按钮时在页面中动态添加/删除指令

  18. 18

    如何在VueJS中单击按钮B时启用按钮A?

  19. 19

    单击不应该发送表单的按钮时,如何在Angular中关闭表单验证

  20. 20

    在 Angular 2 中,如何在单击按钮时聚焦到 div 的底部

  21. 21

    如何在Angular的子组件中单击按钮时为父组件属性设置值

  22. 22

    通过单击mat-table angular8中上一行的按钮来动态添加行?

  23. 23

    如何在动态添加到html表的行中添加行号

  24. 24

    在Angular js中单击按钮时动态生成HTML

  25. 25

    如何在按钮单击事件中向数据表添加行?

  26. 26

    如何在单击按钮时删除动态创建的视图

  27. 27

    如何在单击按钮时动态创建数据表

  28. 28

    jQuery - 向单击其他按钮时动态创建的按钮添加行为

  29. 29

    如何在单击按钮时添加/删除片段?

热门标签

归档