ionic + cordova+angularJs 搭建的H5 App完整版总结 - 婷风_H5之家

为期半个月的项目实践开发，已完整告一段落，团队小组获得第一名，辛苦总算没有白费，想起有一天晚上，整个小组的人，联调到12点才从公司回去，真是心酸。这里总结一下，项目过程中遇到的问题

和感悟。哈哈，放张集体照。嘿嘿，项目所有的不同的team的小伙伴，一群优秀的小伙伴（大多都来自高校211,985）么么哒.下面介绍下我们组的产品和问题。

项目已放在github上：https://github.com/foreverjiangting/myApp/tree/master/myApp/myApp

一：项目效果展示

先展示一下我们做的产品，主要是做一个投票的APP，包括用户登录，注册，答卷，查看答卷详情，排行榜等功能。后台可创建问卷，分发问卷，增加单选题和多选题，创建问卷题目，我这边前端的app将其显

示出来。基本上可以满足需求，但还有很多不完善的地方。

二：制作功能问题总结

先看下核心功能，用户进行单选，多选后，将保存用户的答案，传递后后端，然后在展示详情里面将用户的答案进行展示出来。这里先贴下代码。

<ion-slide-box show-pager="false" on-slide-changed="onSlideChanged(index)" active-slide="currentIndex"> <ion-slide ng-repeat="value in objData" repeat-done="repeatDone()" > <div> <div > <h3>{{data.title}}</h3> <div><span>{{$index+1}}</span>{{value.title}}</div> <div> <div ng-repeat="(key,value2) in value.items"> <label for="26"> <input type="radio" value="{{key}}" ng-model= "selectedValue.radioData[$parent.$index]"> <span >{{value2}}</span> </label> </div> </div> </div> </div> </ion-slide>

这里有几个问题,由于是公用同一个模板，每一个ion-slide就是一页，且一页下面有多个选项。问题如下：

1.如何区分不同个ion-slide下的radio ？贴下代码，只要给name添加就可以。$parent.$index即可

<input type="radio"

2.如何获取用户选择的当前页的答案？使用ng-model即可，将用户选择的答案分别存在一个数组里面。

ng-model= "selectedValue.radioData[$parent.$index]">

　　基本上也没啥难点，就是方法要知道。用户填写答案完成后，进行保存，我们需要获取用户提交的所有答案。看下代码。

$scope.submitData = {}; //用户提交完毕,当前的问卷被提交，修改其状态为已完成。可在已完成的栏目进行查看 $scope.submitSuccess = function(){ var radioJsonData = $scope.selectedValue.radioData; var radioObject = []; for(var k in radioJsonData){ radioObject.push(radioJsonData[k]); } console.log('3333') console.log(radioObject); console.log(radioJsonData) //获取radioData的长度,判断用户选择的数据是否完整 var radioLength = 0; var getRadioLength = function(radioJsonData){ for(var item in radioJsonData){ radioLength++; } return radioLength; } if(getRadioLength(radioJsonData) == $scope.serveLength-1){ var submitData = window._single = { "single":radioObject }; var submitId = window._id = { "id" : $stateParams.timuId } console.log(JSON.stringify(submitData)); var alertPopup = $ionicPopup.alert({ title: '保存成功', template: '您的单选题已完成,请继续答题！' }); alertPopup.then(function(res) { history.go(-1); }); } else{ var alertPopup = $ionicPopup.alert({ title: '提交失败', template: '您的问卷未完成,请返回查看详情！' }); alertPopup.then(function(res) { console.log('提交失败'); }); } };

3.再来看下多选题，跟单选题有点区别。

<ion-slide-box show-pager="false" on-slide-changed="onSlideChanged(index)" active-slide="currentIndex"> <ion-slide ng-repeat="value in objData" repeat-done="repeatDone()" > <div> <div> <h3>{{data.title}}</h3> <div><span>{{$index+1}}</span>{{value.title}}</div> <div > <div ng-repeat="(key,value2) in value.items"> <label for="26"> <input type="checkbox" ng-model = "selected[$parent.$index][$index]" > <span>{{value2}}</span> </label> </div> </div> </div> </div> </ion-slide>

　问题如下：

1.如何在多选里面选中多个答案呢？

ng-model = "selected[$parent.$index][$index]"

这种方法是最简单的，虽然不是我们要的，但之后再做一下解析即可。数组里面的数据是这样子的。因为我们只需要保存用户选择的答案的当前题目的index，保存以1,2,3,4的形式保存即可。

看下解析的代码如下：

$scope.nextSlide = function(){ var slideIndex = $ionicSlideBoxDelegate.currentIndex(); $scope.connectedData = $scope.selected.map(function(item){ var connectSelected = []; for(var i in item){ if(item[i]){ connectSelected.push(parseInt(i)+1); } } return connectSelected.join('http://www.cnblogs.com/'); //进行解析，以/进行分割 }) if( $scope.connectedData == null){ var alertPopup = $ionicPopup.alert({ template: '您还没有选择，请选择答案！' }); }else if( $scope.connectedData[slideIndex] == null && slideIndex != $scope.serveLength-1 ){ var alertPopup = $ionicPopup.alert({ template: '您还没有选择，请选择答案！' }); return true; }else { $ionicSlideBoxDelegate.next(); } return ; console.log('test:'+JSON.stringify( $scope.connectedData)); //$ionicSlideBoxDelegate.next(); };

3.既然单选题和多选题都有答案了，现在就是提交用户答案了。解决不同controller之间的数据通信，本来之前用的$rootscope，不知道为什么不行，后来学霸告诉我直接

存在window下面。于是简单粗暴的解决了问题。