examples/repeat9.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-repeat</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <script>
            var model = avalon.define("test", function(vm) {
                vm.arr = ["a", "b", "c", "d", "e", "f", "g", "h"]
                vm.object = {
                    "kkk": "vvv", "kkk2": "vvv2", "kkk3": "vvv3"
                }
                vm.aaa = {
                    aaa2: "vvv2",
                    aaa21: "vvv21",
                    aaa22: "vvv22"
                }
                vm.bigobject = {
                    title: 'xxx',
                    name: '777',
                    width: 30,
                    align: 'center',
                    sortable: true,
                    cols: "cols3",
                    url: 'data/stockQuote.json',
                    method: 'get',
                    remoteSort: true,
                    sortName: 'SECUCODE',
                    sortStatus: 'asc'
                }
                vm.order = function() {
                    return ["name", "sortStatus", "sortName", "method", "align"]
                }
                vm.dbobjec = {
                    aaa: {
                        aaa2: "vvv2",
                        aaa21: "vvv21",
                        aaa22: "vvv22"
                    },
                    bbb: {
                        bbb2: "ccc2",
                        bbb21: "ccc21",
                        bbb22: "ccc22"
                    }
                }
                vm.dbarray = [
                    {
                        array: ["a", "b", "c"]
                    },
                    {
                        array: ["e", "f", "d"]
                    }
                ]
            });

            setTimeout(function() {
                model.object = {
                    a1: 4444,
                    a2: 5555
                }
            }, 3000)
        </script>
    </head>
    <body ms-controller="test">
        <h3>ms-each实现数组循环</h3>
        <div ms-each="arr">
            {{$index}} <button ms-click="$remove">{{el}} 点我删除</button>
        </div>
        <h3>ms-repeat实现数组循环</h3>
        <table border="1" width="800px" style="background:blueviolet">
            <tr>
                <td ms-repeat="arr">
                    {{el}}  {{$first}} {{$last}}
                </td>
            </tr>
        </table>
        <h3>ms-repeat实现数组循环</h3>
        <ul>
            <li ms-repeat="arr"><button ms-click="$remove">测试{{$index}}</button>{{el}}</li>
        </ul>
        <h3>ms-repeat实现对象循环</h3>
        <ol >
            <li ms-repeat="object">{{$key}}:{{$val}}</li>
        </ol>
        <h3>ms-with实现对象循环</h3>
        <ol ms-with="object">
            <li>{{$key}}:{{$val}}</li>
        </ol>
        <h3>通过指定data-with-sorted规定只输出某一部分建值及它们的顺序，只能循环对象时有效</h3>
        <ol ms-with="bigobject" data-with-sorted="order" title="with">
            <li>{{$key}}:{{$val}}</li>
        </ol>
        <ol title="repeat">
            <li ms-repeat="bigobject" data-with-sorted="order">{{$key}}:{{$val}}</li>
        </ol>
        <h3>ms-repeat实现数组双重循环</h3>
        <table border="1" style="background:yellow" width="400px">
            <tr ms-repeat="dbarray"><td ms-repeat-elem="el.array">{{elem}}</td></tr>
        </table>
        <h3>ms-each实现数组双重循环</h3>
        <table border="1" style="background:green" width="400px">
            <tbody ms-each="dbarray">
                <tr ms-each-elem="el.array"><td>{{elem}}</td></tr>
            </tbody>
        </table>
        <h3>ms-with实现对象双重循环，并通过$outer访问外面的键名</h3>
        <div ms-repeat="dbobjec">{{$key}}:
            <strong ms-repeat="$val">{{$key}}&nbsp;{{$val}} 
                <span style="font-weight: normal">{{$outer.$key}}</span>
            </strong>
        </div>


    </body>
</html>