規範之HTML

先在當前頁面放入幾個表格設置按鈕的html（樣式可能需重新調整）

<div class="bottom_nav1 ta_l" style="padding: 0;height: 32px;width: 300px;margin:4px auto 0;">
    <a class="qxfp" ng-click="addRow();" href="javascript:void(0)" >添加貨品行</a>
    <a class="qxfp" ng-click="cutRow();" href="javascript:void(0)" >
 
減少貨品行</a>
    <a class="qxfp" ng-click="setTabel()"   href="javascript:void(0)" >自定義貨品行</a>
    <div class="setTableRow" style="display:inline-block;top: 381px;">
        <div ng-show="setTabelShow" style="margin:30px 0; bottom:0; top:auto; ">      
            <div class="listShow"
 
 style="height: 250px;">
                <div ng-repeat="hd in headList" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">
                <label ng-drag="true" ng-drag-data="hd">
                    <input  ng-model="myCheck" type="checkbox" ng-checked="!hd.isHide"
 
  ng-click="myChange($index)"/>{{hd.name}}
                    <br />
                </label>
                </div>
            </div>
            <div class="botBtn">
                <div class="selectBtn">
                    <label><input type="checkbox" id="selectAllBtn" ng-model="selectAllModel" ng-click="selectAll()" />全選</label>
                    <label><input type="checkbox" ng-model="selectBackModel" ng-click="selectBack()" />反選</label>
                </div>
                <a class="saveBtn" style="width: 40px" ng-click="saveRowSet()" href="javascript:void(0)">保存</a>
                <a class="cancelBtn" style="width: 40px" ng-click="cancelRowSet()" href="javascript:void(0)">取消</a>
            </div>
        </div>
    </div>
</div>

由於組件已經標簽化，因此我們html導入一個組件化標簽

<my-Ipt-Table name="tablaData"></my-Ipt-Table>