ajax获取的数据通过avalon绑定实例

1.html页面代码:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>avalon数据循环绑定title>
    <script src="../common/jquery-3.1.1.js">script>
    <script src="../common/avalon.js">script>
    <script src="../common/bootstrap/js/bootstrap.min.js">script>
    <link rel="stylesheet" href="../common/bootstrap/css/bootstrap.min.css">
head>
<body>
<table class="table table-striped table-hover pro-lists">
    <thead>
    <tr>
        <th>序号th>
        <th>项目名称th>
        <th>开始时间th>
        <th>合同金额th>
        <th>支付金额th>
        <th>支付比例th>
    tr>
    thead>
    <tbody ms-controller="test">
        <tr ms-for="($index,el) in @data">
            <td>{{$index}}td>
            <td>{{el.pro_name}}td>
            <td>{{el.crt_time}}td>
            <td>{{el.contract_money|number(2)}}td>
            <td>{{el.pay_money|number(2)}}td>
            <td ms-if="el.pay_money==0">
                0
            td>
            <td ms-if="el.pay_money!=0">
                {{el.pay_money / el.contract_money *100|number(2)}}%
            td>
        tr>
    tbody>
table>
body>
<script type="text/javascript">
    vm = avalon.define({
        $id:'test',
        data:{}
    });
    $.ajax({
        url:'../json/avalon_for.json',
        type:'get',
        dataType:'json',
        success: function (ajax) {
            vm.data=ajax.data;
//            console.log(vm.data)
        }
    });
script>
html>

2.json数据


{
  "code": 200,
  "data": [
    {
      "pro_name":"沙湖,南湖水环境提升规划方案",
      "crt_time":"2017-10-27",
      "contract_money":"20000",
      "pay_money":"0"
    },
    {
      "pro_name":"保利升官渡项目新建地下车库通道方案论",
      "crt_time":"2017-10-27",
      "contract_money":"6000",
      "pay_money":"555"
    },
    {
      "pro_name":"邬家巷(鹦鹉大道-南城巷)道路排水修建规划",
      "crt_time":"2017-10-28",
      "contract_money":"7777",
      "pay_money":"3333"
    }
  ]
}

你可能感兴趣的:(avalon,ajax)