如何在ng-repeat中显示一个新行，基于点击ng-repeat

时间：2017-02-28 13:16:39

标签： javascript angularjs

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

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>

有人可以帮忙吗？

4 个答案:

答案 0 :(得分：0)

检查以下步骤

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

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

演示1

plnkr

演示2

plnkr

答案 1 :(得分：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

数组中的splice方法主要用于向/从数组添加/删除项目，并返回已删除的项目。

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

答案 2 :(得分：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 {
		    	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;
		}
		
<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>

答案 3 :(得分：0)

我终于找到了问题的答案。

可以在这里找到：

https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

我希望基于点击展开/折叠新行，而data-toggle=collapse就是这样做。

相关问题
最新问题