party_bid3,4总结

卡3,4主要是在卡2 的基础上进行存取,说一下主要的问题

1.竞价开始后,活动列表页面的活动,和开始竞价的底色同时为黄色

class="{{activity.activity_staus}} || {{activity.bid_status}}"   //用 || 或当两者状态同时为true时,class为true,会调用class里为true的样式,显示底色为黄

2.用underscore代替for循环

一开始因为写的太多for,if的循环嵌套,导致第二个for没有作用,不循环,后来用_.find代替for循环可以用,这里讲一下我在卡3用到的_.find和_,filter._.find返回的是第一个符合条件的值,而_.filte返回的是符合条件的数组,用法基本一样,这里举一个例子

var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
_.find会返回2,_.filt会返回[2,4,6]

 3.我把所有的数据都存在了一个数组里,当存得数据多的时候由于ng-repeat的原因会出现一个不认识的随机键值,类似$007.解决方法在ng-repeat后加track by $index,例如

ng-repeat="bidding in activity track by $index"

 4.卡4主要是取数据,越做会发现需要存的状态越多,需要存的数据也越多,需要判定的也越多,我都存一个数组里了,取数据的时候非常的繁琐,需要经过2,3,个for循环.在对取出来的数据进行分组判定的时候用到了_.sortBy和_.map _.countBy讲一下这两个的用法

var bidding_count = _.sortBy(bidding, function (bidding) {
                            return bidding.bid_price
                        })    //根据价格对bidding进行升序排序

 

 

 var count = _.countBy(bidding, function (bidding) {
                            return bidding.bid_price
                        })   //按价格对bidding分组,统计出每个相同价格的人数
                        var coun = _.map(count, function (value, key) {
                            return {"price": key, "count": value}
                        })       //把统计出的人数和价格按 {"price":key,"count":value }形式存储到count数组中
                        localStorage.setItem("bid_price", JSON.stringify(coun))   存到本地bid_price中

 5.当进入竞价结果页面时会弹窗,3秒后自动关闭,我用的模态框实现的

模态框是使用JQUERy插件实现的,用来创建模态窗口

.modal.fade#ModalSuccess     绑定id
  .modal-dialog      
    .modal-content
      .modal-header     //modal的样式
      %a(class="close" data-dismiss="modal" ) &times  data-dismiss="modal"是一个html5 data属性,用于关闭模态窗口
        %h4.modal-title
      .modal-body
      %center
      {{bid_name}}  {{phone}}  ￥{{price}}    竞价成功    //显示的内容
      .modal-footer

 js中写延时程序

 $('#ModalSuccess').modal("show");   获取id显示
                        $timeout(function () {     timeout方法,3秒后关闭
                            $('#ModalSuccess').modal('hide');
                        }, 3000)

 这里推荐一个bootstrap的学习网站

http://www.w3cschool.cc/bootstrap/bootstrap-v2-modal-plugin.html