1. 모듈 정의
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