bg-render+bg-class+filter

重点：

1、多层render写法参数下面的html代码段，外层bg-render---><script type='text/html'>--->{{for}}--->bg-class。

2、把逻辑处理放在js中写，例如下列的filter应用，原放在页面中写，但页面主要用于数据显示，不适合放大量逻辑处理。

 

 

易错点:

1、检查数据源类型或引用不对。

2、bg-***内不可写花括号。

3、item有没有写成了i 。

 

 

     <ul bg-render-sync="item in tiListData">
         <script type="text/html">
             {{for i in item.examOptions}}
                 <li bg-class="i.eoSequence | option:[item.examTitle.answer,item.examTitle.rightAnswer,tiList.isTimeOut]"> {{i.eoSequence}}</li>
             {{/for}}
         </script>
     </ul>

  bingo.filter('option', function() {
         return function (val,parm) {
             var flag = '';
             /*
                  超时则显示正确答案，未超时只能查看自己的作答
                  parm[0]  我的答案
                  parm[1]  正确答案
                  parm[2]  是否超时
              */
             if(parm[2]) {
                 // 超时
                 if (val == parm[0]) {
                     flag = false;
                 }else if(val == parm[1]){
                     flag = true;
                 };
             }else{
                 // 未超时
                 if (val == parm[0]) {
                     if (val == parm[1]) {
                         flag = true;
                     } else {
                         flag = false;
                     }
                 };
             };
             return flag+' item';
         }
     });

    var action1 = bingo.action(function($view){
        var txt = '{"rightRate":null,"examCount":1,"examList":[{"examOptions":[{"id":"b1f177b0-3b58-4a88-9eef-957837571e10","examId":"02eabfcc-547c-4d14-a05d-39a5f442d269","eoSequence":"A","eoName":"三边垂直平分线的交点","eoOrder":1,"eoNameBak":null},{"id":"3b8fceeb-1eaa-4eeb-8637-a4e43d188b2c","examId":"02eabfcc-547c-4d14-a05d-39a5f442d269","eoSequence":"B","eoName":"三条内角平分线的交点","eoOrder":2,"eoNameBak":null},{"id":"d27064d8-d891-47dc-9552-ef3cbad0f04d","examId":"02eabfcc-547c-4d14-a05d-39a5f442d269","eoSequence":"C","eoName":"三条高线的交点","eoOrder":3,"eoNameBak":null},{"id":"1622aa66-e2dc-4bfe-b3a5-0fe44c154589","examId":"02eabfcc-547c-4d14-a05d-39a5f442d269","eoSequence":"D","eoName":"三条中线的交点","eoOrder":4,"eoNameBak":null}],"examTitle":{"id":"02eabfcc-547c-4d14-a05d-39a5f442d269","isRight":0,"rightAnswer":"A","answer":"C","explain":null,"examName":"到三角形三个顶点距离相等的点是 \\((\\qquad)\\)","costTime":3},"userHomeWorkExamId":"ea6f2949-bb4e-4034-bbf4-e1af5c8de015"}],"chapterNames":["第十一章 三角形","第十一章 三角形"],"count":26,"page":{"currentPage":1,"totalPages":1,"pageSize":10,"totalRows":1,"pageStartRow":0,"pageEndRow":10,"hasNextPage":false,"hasPreviousPage":false,"nextPage":0,"previousPage":1,"pageList":[],"page":1},"taskState":2,"endDate":1472216345000,"isTimeOut":1,"finishCount":1,"taskName":"111"}';
        $view.tiList = eval('('+txt+')');
        $view.tiListData = $view.tiList.examList[0];
        console.log('你选择了',$view.tiList.examList[0].examTitle.answer);
        $view.$update();
    });