1. 首页
  2. 问答
  3. 如何基于点击的NG-重复显示NG重复内的新行

如何基于点击的NG-重复显示NG重复内的新行

2017-02-28 323 views
-1

http://plnkr.co/edit/gpGsKdhzdrPnCJ0A9Zdz?p=preview如何基于点击的NG-重复显示NG重复内的新行

HTML

<html ng-app> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 
    <script src="script.js"></script> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 

    <div ng-controller="Ctrl"> 

    <div class="rTable"> 
     <div class="rTableRow"> 
     <div class="rTableHead"><strong>Field1</strong></div> 
     <div class="rTableHead">Field2</div> 
     <div class="rTableHead">Field3</div> 
     </div> 
     <div class="rTableRow" ng-repeat="leaveApp in leaveAppColl"> 
     <div class="rTableCell">{{leaveApp.field1}}</div> 
     <div class="rTableCell">{{leaveApp.field2}}</div> 
     <div class="rTableCell"><a href="#">click</a></div> 
     </div> 
    </div> 


    </div>

CSS：

.rTable { 
    display: table; 
    width: 100%; 
} 

.rTableRow { 
    display: table-row; 
} 

.rTableHeading { 
    display: table-header-group; 
    background-color: #ddd; 
} 

.rTableCell, 
.rTableHead { 
    display: table-cell; 
    padding: 3px 10px; 
    border: 1px solid #999999; 
} 

.rTableHeading { 
    display: table-header-group; 
    background-color: #ddd; 
    font-weight: bold; 
} 

.rTableFoot { 
    display: table-footer-group; 
    font-weight: bold; 
    background-color: #ddd; 
} 

.rTableBody { 
    display: table-row-group; 
}

JavaScript：

function Ctrl($scope) { 
    $scope.leaveAppColl=new Array(); 
    $scope.leaveAppColl[0]={field1:"abc",field2:"def",field3:"ghi"}; 
    $scope.leaveAppColl[1]={field1:"abc",field2:"def",field3:"ghi"}; 
    $scope.leaveAppColl[2]={field1:"abc",field2:"def",field3:"ghi"}; 
}

这是我的代码。我希望当用户点击一行时，下一行之前应该出现一个新的行。

这是我正在寻找的东西：这只是一个假想的例子，只是为了说明我想达到的目的。

http://plnkr.co/edit/uAYnBsGZA2m9MOmyeXxc?p=preview

<html ng-app> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 
    <script src="script.js"></script> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 

    <div ng-controller="Ctrl"> 

    <h2>Phone numbers</h2> 
    <h2>Phone numbers</h2> 
    <div class="rTable"> 
     <div class="rTableRow"> 
     <div class="rTableHead"><strong>Field1</strong></div> 
     <div class="rTableHead">Field2</div> 
     <div class="rTableHead">Field3</div> 
     </div> 
     <div class="rTableRow"> 
     <div class="rTableCell">abc</div> 
     <div class="rTableCell">abc</div> 
     <div class="rTableCell"><a href="#">click</a></div> 
     </div> 
     <div class="rTableRow"> 
     <div class="rTableCell">abc</div> 
     <div class="rTableCell">abc</div> 
     <div class="rTableCell"><a href="#">click</a></div> 
     </div> 
     <div class="rTableRow"> 
     <div class="rTableCell">abc</div> 
     <div class="rTableCell">abc</div> 
     <div class="rTableCell"><a href="#">click</a></div> 
     </div> 
     </div> 

    </div>

任何人可以帮助？下面

来源

2017-02-28 user121

+0

创建一个方法将对象推送到leaveAppColl数组上点击 – Rakeschand

+0

使用[ng-click指令]（https://docs.angularjs.org/api/ng/directive/ngClick）并更新示例以使用更新版本的AngularJS。使用v1.0.5的例子对其他读者没有用处。 – georgeawg

回答

0

检查过程

  • 添加ng-click事件排| ng-click="addRow()"
  • 传递行索引到ng-click处理程序| ng-click="addRow($index)"
  • 使用splice插入数组中的特定索引。 | $scope.leaveAppColl.splice(index+1, 0, {field1:"",field2:"",field3:""});

理想情况下，您不应将单击事件处理程序分配给行，因为它可能包含具有自己的事件处理程序的元素。 所以更好的方法是，创建一个新列以添加一个新行或者创建一个按钮我的列标题，如下所示demo2。

演示1

plnkr

演示2

plnkr

来源

2017-02-28 13:33:56

+0

谢谢，但我需要在两行之间插入一张表。此表中的值与ng-repeat中的格式不同。例如，leaveAppCollection可能包含leaveApp值，但插入的行显示的离开应用程序数据不是以重复的值格式。我;我想我可能不得不使用jQuery来操纵DOM – user121

0 
<html ng-app> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">  </script> 
    <script src="script.js"></script> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
<body> 
    <div ng-controller="Ctrl"> 
    <div class="rTable"> 
     <div class="rTableRow"> 
     <div class="rTableHead"><strong>Field1</strong></div> 
     <div class="rTableHead">Field2</div> 
     <div class="rTableHead">Field3</div> 
    </div> 
    <div class="rTableRow" ng-repeat="leaveApp in leaveAppColl"> 
    <div class="rTableCell">{{leaveApp.field1}}</div> 
    <div class="rTableCell">{{leaveApp.field2}}</div> 
    <div class="rTableCell"><a href="#" ng-click="addRow($index)">click</a></div> 
    </div> 
</div> 
</div> 
</body> 
</html>

JS：

function Ctrl($scope) { 
    $scope.leaveAppColl=new Array(); 
    $scope.leaveAppColl[0]={field1:"abc",field2:"def",field3:"ghi"}; 
    $scope.leaveAppColl[1]={field1:"abc",field2:"def",field3:"ghi"}; 
    $scope.leaveAppColl[2]={field1:"abc",field2:"def",field3:"ghi"}; 
    $scope.addRow = function(index) { 
     $scope.leaveAppColl.splice(index+1, 0, { field1:"abc",field2:"def",field3:"ghi"}); 

} 
}

Plnkr链接：在阵列

http://plnkr.co/edit/HGC1soLfjv1MSsjUjUux?p=preview

拼接方法主要用于增加/删除数组项/，并返回删除的项目（多个）。

拼接的格式是array.splice（索引，多少，item1，.....，itemX）

来源

2017-02-28 13:50:35

0

只需在每个对象的$ scope.leaveAppColl数组内添加数组。见下文。根据您的需要对齐css。

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

 
function Ctrl($scope) { 
 
    $scope.leaveAppColl=new Array(); 
 
    $scope.leaveAppColl[0]={field1:"abc",field2:"def",field3:"ghi", pushHere:[]}; 
 
    $scope.leaveAppColl[1]={field1:"abc",field2:"def",field3:"ghi", pushHere:[]}; 
 
    $scope.leaveAppColl[2]={field1:"abc",field2:"def",field3:"ghi", pushHere:[]}; 
 
    
 
    $scope.addRow = function(id){  
 
    $scope.leaveAppColl[id].pushHere.push({field1:"New field "+id,field2:"New field "+id,field3:"New field "+id});  
 
    } 
 
} 
 
Ctrl.$inject =['$scope']; 
 

 
app.controller('Ctrl', Ctrl);
.rTable { 
 
\t \t  \t display: table; 
 
\t \t  \t width: 100%; 
 
\t \t } 
 
\t \t .rTableRow { 
 
\t \t  \t display: table-row; 
 
\t \t } 
 
\t \t .rTableHeading { 
 
\t \t  \t display: table-header-group; 
 
\t \t  \t background-color: #ddd; 
 
\t \t } 
 
\t \t .rTableCell, .rTableHead { 
 
\t \t  \t display: table-cell; 
 
\t \t  \t padding: 3px 10px; 
 
\t \t  \t border: 1px solid #999999; 
 
\t \t } 
 
\t \t .rTableHeading { 
 
\t \t  \t display: table-header-group; 
 
\t \t  \t background-color: #ddd; 
 
\t \t  \t font-weight: bold; 
 
\t \t } 
 
\t \t .rTableFoot { 
 
\t \t  \t display: table-footer-group; 
 
\t \t  \t font-weight: bold; 
 
\t \t  \t background-color: #ddd; 
 
\t \t } 
 
\t \t .rTableBody { 
 
\t \t  \t display: table-row-group; 
 
\t \t } 
 
\t \t
<html ng-app="myApp"> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-sanitize.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="Ctrl"> 
 

 
    <div class="rTable"> 
 
     <div class="rTableRow"> 
 
     <div class="rTableHead"><strong>Field1</strong></div> 
 
     <div class="rTableHead">Field2</div> 
 
     <div class="rTableHead">Field3</div> 
 
     </div> 
 
     <div style="" ng-repeat="leaveApp in leaveAppColl"> 
 
     <div class="rTableRow"> <div class="rTableCell">{{leaveApp.field1}}</div> 
 
     <div class="rTableCell">{{leaveApp.field2}}</div> 
 
     <div class="rTableCell"><a href="#" ng-click="addRow($index)">click</a></div> 
 
     </div> 
 
     <div class="rTableRow" ng-repeat="leave in leaveApp.pushHere"><div class="rTableCell">{{leave.field1}}</div><div class="rTableCell">{{leave.field2}}</div><div class="rTableCell">{{leave.field3}}</div></div> 
 
     
 
     </div> 
 
    </div> 
 
<br> 
 
    
 
    </div> 
 

 

 

 
</body> 
 

 
</html>

来源

2017-03-01 07:20:27

相关问题

 相关问题