Angular 动态表格内联编辑

Question

I'm working on dynamic table where I don't know how many columns/rows I have and I'm trying to implement inline edit with inline templates using ng-include.

First problem:

How to use ng-include on < tr > level and include scripts inside < td >, is it even possible? I could call ng-inlcude on the < td > level but I guess that would be huge overhead...

Second problem:

How to use the same ng-include to include edit_btn/display_btn templates outside of ng-repeat as the last cells?

        <tr ng-repeat="row in model.array" ng-include="model.isEditMode(row)">
            <td ng-repeat="(k, v) in row" ng-show="model.header[$index].display == true" class="text-center" >
                <script type="text/ng-template" id="edit">
                    <div ng-if="model.header[$index].isDisabled == true">
                        <div ng-if="model.header[$index].type == 'datetime'">
                            <input type="text" class="form-control" ng-model="model.dateTime"/>
                        </div>
                        <div ng-if="model.header[$index].type == 'string'">
                            <input type="text" class="form-control" ng-model="v"/>
                        </div>
                    </div>
                    <div ng-if="model.header[$index].isDisabled == false">
                        <div ng-if="model.header[$index].type == 'datetime'">
                            <input type="text" class="form-control" ng-model="model.dateTime" />
                        </div>
                        <div ng-if="model.header[$index].type == 'string'">
                            <input type="text" class="form-control" ng-model="v" />
                        </div>
                    </div>
                </script>
                <script type="text/ng-template" id="display">
                    <div ng-if="model.header[$index].isDisabled == true">
                        <div ng-if="model.header[$index].type == 'datetime'">
                            {{model.dateTime}}
                        </div>
                        <div ng-if="model.header[$index].type == 'string'">
                            {{v}}
                        </div>
                    </div>
                    <div ng-if="model.header[$index].isDisabled == false">
                        <div ng-if="model.header[$index].type == 'datetime'">
                            {{model.dateTime}}
                        </div>
                        <div ng-if="model.header[$index].type == 'string'">
                            {{v}}
                        </div>
                    </div>
                </script>
            </td>
            <script type="text/ng-template" id="edit_btn">
                <td>
                    <button type="button" class="btn btn-primary" ng-click="model.save(entry)">save</button>
                </td>
            </script>
            <script type="text/ng-template" id="display_btn">
                <td>
                    <button type="button" class="btn btn-primary" ng-click="model.edit(entry)">edit</button>
                </td>
            </script>
        </tr>

Answer 1

You can use Angular-xeditable, which can be found in the following link: https://vitalets.github.io/angular-xeditable/ . You can find the implementation you need on there.