1. 首頁
  2. 問答
  3. 如何基於點擊的NG-重複顯示NG重複內的新行

如何基於點擊的NG-重複顯示NG重複內的新行

2017-02-28 315 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

相關問題

 相關問題