Avalon使用

GIT


<script type="text/javascript" src="avalon.modern.min.js" charset="utf-8"></script>

 var consumption_amount = avalon.define({
        $id:"consumption_amount",
        col:[{name:"tag"},{name:"start"},{name:"end"},],
        rows:[{"tag":"name","start":"0.1","end":"0.2"}]
    });

<div class="modal-body" ms-controller="consumption_amount">
            <h4 class="form-signin-heading">Input XML:</h4>
            <table class="table table-bordered table-hover">
                <thead>
                    <tr >
                        <th ms-repeat-col='col'>
                            {{col.name}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ms-repeat='rows' >                    
                        <td>
                              <input ms-duplex="el.tag">
                        </td>             
                        <td>
                              <input ms-duplex="el.start">
                        </td>     
                        <td>
                              <input ms-duplex="el.end">
                        </td>  
                        <td>
                              <a href="javascript:void(0);" ms-click="$remove"><button class="btn btn-xs btn-danger" type="button"><span class="glyphicon glyphicon-minus-sign"></span> DEL</button></a>
                        </td>                             
                    </tr>
                    <tr >                    
                        <td>
                              <input id="newamount_tag" placeholder="TAG">
                        </td>             
                        <td>
                              <input id="newamount_start" placeholder="START">
                        </td>     
                        <td>
                              <input id="newamount_end" placeholder="END">
                        </td>  
                        <td>
                              <a href="javascript:void(0);" ms-click="add"><button class="btn btn-xs btn-info" type="button"><span class="glyphicon glyphicon-plus-sign"></span> ADD</button></a>
                        </td>                             
                    </tr>
                </tbody>
            </table>
        </div>