party_bid的第二张卡的主要部份是报名信息的收集和按钮的转换,第三张卡则是对竞价信息的处理,所以,把这两张卡的总结写在一起了。
一、当前进行的活动或者当前正在进行竞价与其对应的活动现实黄色
可以自己在CSS文件中写一个样式,并给这个样式起一个名字,然后在活动数组与竞价数组中设置一个变量,初始值为“false”,每当执行“开始”时,将变量的之改为 设置的黄色的那个样式的名字,然后在判断当前活动和竞价是哪个,在页面上引用这个样式
样式:
.true{ background: yellow !important; }//一定要注意!important,原来的css中就有颜色的控制,这时候如不加此句,则颜色可能会显示不出来
<li ng-repeat="activity in list1" class="{{activity.tureth}} || {{activity.bid_status}}">
‘||’意思是 “或”,表达的是当一个条件为真时,语句为真
二、结束时显示弹窗
当点击结束按钮时,弹出一确认对话框,应用到了firm方法
//弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { alert("点击确定"); } else { alert("点击取消"); } }
三、_.find的用法
_.find是遍历的一种方式,可以多用在需要多次for循环来寻找定位数组元素的情况,他会返回所遍历的list中第一个符合条件的元素
var evens = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); => 2
在遍历时,有时需要提取list中所有符合条件的元素,这时候需要的就是另一个语法:_.filter
var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); => [2, 4, 6]
Understore学习文档:http://learningcn.com/underscore/
四、接收短信,提取短信
报名短信是以“bm+报名名称“为格式,竞价短信是以”jj+竞价价格“为格式,我们需要识别短信的开头两个字母是否是我们需要的短信的格式,然后提取短信内容中的”报名名称“和”竞价价格“作为我们显示的内容,这样,我们就用到了以下的表达式
var duanxin = json_message.messages[0].message.replace(/\s/g, "");
\s代表的是空格,/g表示全局,replace()方法执行的是检索与替换功能,所以这句话的意思就是:将短信中的所有内容(/g)中的空格(\s)替换为空白字符("")
duanxin.search(/bm/i) == 0
/i表示不区分大小写,即无论"bm"两个字符大小写均可以被识别
message.name = duanxin.substr(2).trim()
此句话的意思是去除短信的前两位字符,从第三位开始取,也就是直接取出报名信息和竞价信息
五、页面自动刷新
//每当有报名信息收录时,页面自动刷新
function refresh_pages() {
var refresh_page = document.getElementById('wrapper') //获取需要刷新的页面ID
if (refresh_page) {
var scope = angular.element(refresh_page).scope();//调用其他JS界面的显示方法
scope.$apply(function () {
scope.diaoyong(); //使用$apply()将报名页面的refresh方法包起来
})
}
}
六、 ng-switch
ng-switch 是一种类似于ng-show的方法,用于两个按钮的交替显示,此处应用于报名页面的开始与结束按钮,当ng-switch=true时,显示"开始"按钮,当ng-switch=false时,显示"结束"按钮
<div class="header-right" ng-switch on="log"> <button class="btn-4 btn-primary" ng-switch-when="true" ng-click="hh()" ng-disabled="start_change"> 开 始 </button> <button class="btn-4 btn-primary" ng-switch-when="false" ng-click="HH()"> 结 束 </button> </div>
七、数据绑定
数据到表现的绑定,主要是通过模板标记直接完成的
使用 {{ }} 这个标记,就可以直接引用,并绑定一个作用域内的变量。效果就是,不管因为什么,如果作用域的变量发生了改变,我们随时可以让相应的页面表现也随之改变。
js:
$scope.middle = activities[i].messages $scope.number = activities[i].messages.length
html:
<div id="wrapper" class="wrapper scrollable"> <ul class="list-style-2"> <li ng-repeat="messages in middle track by $index"> <h3>{{messages.name}}</h3> //显示绑定的数据 <h3 class="header-right"> {{messages.phone}} </h3> </li> </ul> </div>
当数组中定义了过多的元素是,执行ng-repeat命令时在本地存储的数据库中会出现一些随机的键值对,例如“$008”,解决办法为在ng-repeat的作用域加上“track by $index"