Angularjs增加/删除表格

最新推荐文章于 2024-05-24 09:56:19 发布

keyuzhang

最新推荐文章于 2024-05-24 09:56:19 发布

阅读量365

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/keyuzhang/article/details/89045741

版权

AngularJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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);
		}
	})

keyuzhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angularjs增加/删除表格

1.引入2.html部分<body ng-app="test" ng-controller="con"> <button type="button" ng-click="entity={specificationOptionList:[]}">新建</button>  <div cla...
复制链接

扫一扫