angularJS(七)动态增加行

1.点击新建一个窗口

 <!--

       entity={} :清空数据，
       entity.specificationOptionList=[{}]：为规格选项设置一个空表格
     -->
<button type="button" class="btn btn-default" title="新建"
    data-toggle="modal" data-target="#editModal"

    ng-click="entity={};entity.specificationOptionList=[{}]">
       <i class="fa fa-file-o"></i> 新建
</button>

2.添加规格选项

<div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                    <h3 id="myModalLabel">规格编辑</h3>
                </div>
                <div class="modal-body">

                    <table class="table table-bordered table-striped" width="800px">
                        <tr>
                            <td>规格名称</td>
                            <td><input class="form-control"
                                ng-model="entity.specification.specName" placeholder="规格名称"></td>
                        </tr>
                    </table>

            <!-- 规格选项卡 
                    2.ng-click="addSpecOpetion()"：点击调用addSpecOpetion()方法添加规格选项

            -->

                    <div class="btn-group">
                        <button type="button" ng-click="addSpecOpetion()"
                            class="btn btn-default" title="新建">
                            <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>
    <!--
        3.   1）通过ng-repeat循环便利选项卡
             ng-repeat="specOption in entity.specificationOptionList"
             这里循环便利规格选项卡
             2)通过ng-model将用户输入的数据绑定到specOption对象中
             ng-model="specOption.optionName" placeholder="规格选项"
             ng-model="specOption.orders" placeholder="排序"
    -->
                            <tr ng-repeat="specOption in entity.specificationOptionList">

                                <td><input class="form-control"
                                    ng-model="specOption.optionName" placeholder="规格选项"></td>
                                <td><input class="form-control"
                                    ng-model="specOption.orders" placeholder="排序"></td>
                                <td>
     <!--
             5.ng-click="delSpecOpetion(index)"：点击删除该索引的规格选项

    -->             
                                    <button type="button" ng-click="delSpecOpetion(index)"
                                        class="btn btn-default" title="删除">
                                        <i class="fa fa-trash-o"></i> 删除
                                    </button>
                                </td>
                            </tr>

                        </tbody>
                    </table>


                </div>
                                        <td>
     <!--
             4.ng-click="add()"：点击保存数据

        -->             
                <div class="modal-footer">
                    <button class="btn btn-success" data-dismiss="modal"
                        aria-hidden="true" ng-click="add()">保存</button>
                    <button class="btn btn-default" data-dismiss="modal"
                        aria-hidden="true">关闭</button>
                </div>

2.添加行的控制器方法

// 添加规格选项
    $scope.addSpecOpetion = function() {
        $scope.entity.specificationOptionList.push({});

    }

3，删除行的控制方法

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

    }

4、保存的方法

    // 添加规格的方法
    $scope.add = function() {
        //调用添加的服务
        var obj = specificationService.add($scope.entity);
        //结果显示
        obj.success(function(data) {
            // 添加成功
            if (data.success) {
                // 刷新列表
                $scope.reloadList();
            } else {
                // 添加失败
                alert(data.message);
            }
        })

    };

例如 添加一个屏幕尺寸的规格