angularJS(七)动态增加行

1.点击新建一个窗口

 
<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>

            

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

    };

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