手动添加删除行

一. 定义模块

1. base.js

//定义模块:
var app = angular.module("hahaha", []);

2. specificationController.js

//控制层 
app.controller('specificationController', function($scope, $controller){	

	//添加行
	$scope.addTableRow = function(){
		$scope.entity.specificationOptionList.push({});
	}
	
	//删除该行
	$scope.deleteTableRow = function(index){
		$scope.entity.specificationOptionList.splice(index, 1);
	}
    
});

3. 前台页面引入相关资源

<!-- 引入angular的js -->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
    
<!-- 引入自定义相关js -->
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/controller/specificationController.js"></script>

4. 页面主要功能

<body class="hold-transition skin-red sidebar-mini" ng-app="hahaha" ng-controller="specificationController">

	<div class="btn-group">
		<button type="button" class="btn btn-default" title="新建" ng-click="entity={specificationOptionList:[]}" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
	</div>                             
                                
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
		<div class="btn-group">
			<button type="button" class="btn btn-default" title="新建" ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新增规格选项</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> 

	</div>    

</body>

源码下载: https://pan.baidu.com/s/1zhtcMXcdfm7A6itoRSZhHA

一. 定义模块

猜你喜欢