Angularjs增加/删除表格

版权声明:转载请标明出处 https://blog.csdn.net/keyuzhang/article/details/89045741

1.引入

2.html部分

<body ng-app="test" ng-controller="con">

	<button type="button"  ng-click="entity={specificationOptionList:[]}">新建</button>
	<!-- 规格选项 -->
	<div class="btn-group">
	  <button type="button" class="btn btn-default" title="新建" ng-click="addTableRow()">新增规格选项</button>
	  
	</div>
	<table class="table table-bordered table-striped table-hover dataTable">
	    <thead>
	      <th class="sorting">规格选项</th>
	      <th class="sorting">排序</th>																
	      <th class="sorting">操作</th>	
	    </thead>
	    <tbody>
	      <tr ng-repeat="pojo in entity.specificationOptionList">
	           
	            <td>
	            	<input ng-model="pojo.optionName" class="form-control" placeholder="规格选项"> 
	            </td>
	            <td>
	            	<input ng-model="pojo.orders" class="form-control" placeholder="排序"> 
	            </td>
				<td>
					<button type="button" class="btn btn-default" title="删除" ng-click="deleteTableRow($index)"><i class="fa fa-trash-o"></i> 删除</button>
				</td>
	      </tr>
	    </tbody>
	</table> 
</body>

3.js

	var app = angular.module("test",[]);
	app.controller('con',function($scope){


		$scope.addTableRow = function(){
			$scope.entity.specificationOptionList.push({});
		}

		$scope.deleteTableRow = function(index){
			$scope.entity.specificationOptionList.splice(index,1);
		}
	})

猜你喜欢

转载自blog.csdn.net/keyuzhang/article/details/89045741