重点:
1、多层render写法参数下面的html代码段,外层bg-render---><script type='text/html'>--->{{for}}--->bg-class。
2、把逻辑处理放在js中写,例如下列的filter应用,原放在页面中写,但页面主要用于数据显示,不适合放大量逻辑处理。
易错点:
1、检查数据源类型或引用不对。
2、bg-***内不可写花括号。
3、item有没有写成了i 。
1 <ul bg-render-sync="item in tiListData"> 2 <script type="text/html"> 3 {{for i in item.examOptions}} 4 <li bg-class="i.eoSequence | option:[item.examTitle.answer,item.examTitle.rightAnswer,tiList.isTimeOut]"> {{i.eoSequence}}</li> 5 {{/for}} 6 </script> 7 </ul>
1 bingo.filter('option', function() { 2 return function (val,parm) { 3 var flag = ''; 4 /* 5 超时则显示正确答案,未超时只能查看自己的作答 6 parm[0] 我的答案 7 parm[1] 正确答案 8 parm[2] 是否超时 9 */ 10 if(parm[2]) { 11 // 超时 12 if (val == parm[0]) { 13 flag = false; 14 }else if(val == parm[1]){ 15 flag = true; 16 }; 17 }else{ 18 // 未超时 19 if (val == parm[0]) { 20 if (val == parm[1]) { 21 flag = true; 22 } else { 23 flag = false; 24 } 25 }; 26 }; 27 return flag+' item'; 28 } 29 });
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(); });