新增规格选项（新增行与删除行的操作）

效果图：

 

一、将表格与变量进行绑定（页面）

<!-- 规格选项 -->
<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>
    <tr>


        <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="deleTableRow($index)"><i
                    class="fa fa-trash-o"></i> 删除
            </button>
        </td>
    </tr>
    </tbody>
</table>

二、前端控制层

//增加规格选项行
$scope.addTableRow=function(){
   $scope.entity.specificationOptionList.push({});          
}

//删除规格选项行
$scope.deleTableRow=function(index){
   $scope.entity.specificationOptionList.splice(index,1);
}

三、此时前端会报错。specificationOptionList属性未定义

在点击新建这个窗口的时候进行定义

<button type="button" class="btn btn-default" title="新建" data-toggle="modal"
        data-target="#editModal" ng-click="entity={specification:{},specificationOptionList:[]}">
        <i class="fa fa-file-o"></i> 新建
</button>

 

转载于:https://my.oschina.net/u/4117203/blog/3048385