avalon
/
index_each3.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ms-each</title>
        <!--   <script src="avalon.mobile.099.js" type="text/javascript"></script>-->
        <script src="avalon.js" type="text/javascript"></script>
        <style>
            ul{
                display:inline-block;
                float:left;
                margin:20px;
                width:300px;
                height:300px;
                border:1px solid #ccc;
                list-style: none;
            }
        </style>
        <script>


            var model = avalon.define("xxx", function(vm) {
                vm.firstName = "司徒"
                vm.left = [{checked: false, text: "1111"},
                    {checked: false, text: "2222"},
                    {checked: false, text: "3333"},
                    {checked: false, text: "4444"},
                    {checked: false, text: "5555"}
                ]
                vm.array2 = [1, 2, 3, 4]
                vm.right = []
                vm.array3 = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]
                //           vm.array3 = [1,2,3]
                vm.addToRight = function() {
                    var array = []
                    model.left.forEach(function(el) {
                        if (el.checked) {
                            var model = avalon.mix({}, el.$model)

                            model.checked = false

                            array.push(model)
                        }
                    })
                    model.left.removeAll(function(el) {
                        return el.checked
                    })
                    model.right.push.apply(model.right, array)

                }
                vm.addToLeft = function() {
                    var array = []
                    model.right.forEach(function(el) {
                        if (el.checked) {
                            var model = avalon.mix({}, el.$model)
                            model.checked = false
                            array.push(model)
                        }
                    })
                    model.right.removeAll(function(el) {
                        return el.checked
                    })
                    model.left.push.apply(model.left, array)

                }
            });

            setTimeout(function() {
                model.array3.reverse()
            }, 2000)

        </script>
    </head>
    <body ms-controller="xxx">
        <p><button type="button" ms-click="addToRight">addToRight</button>
            <button type="button" ms-click="addToLeft">addToLeft</button>
        </p>
        <hr/>
        <ul ms-each-el="left">
            <li><input ms-duplex-radio="el.checked" type="checkbox">{{el.text}}</li>
        </ul>
        <ul ms-each-el="right">
            <li><input ms-duplex-radio="el.checked" type="checkbox">{{el.text}}</li>
        </ul>
        <ol>
            <li ms-repeat="array2" ms-if="!$last">{{el}}</li>
        </ol>
        <ol ms-each="array2">
            <li ms-if="array.size() == 0">{{el}}</li>
        </ol>
        <table border="1">
            <tr ms-repeat="array3">
                <td ms-repeat-elem="el">{{elem}}<b>它位于第{{$outer.$index}}行</b></td>
            </tr>
        </table>
    </body>
</html>