Peterfei

上主是我的牧者,我实在一无所缺


  • 首页

  • 归档

  • 标签

rails 使用angularjs 中完成分页

发表于 2016-04-07   |   分类于 ROR   |  

rails 使用angularjs 中完成分页:
Base 插件:kaminari ,angular-paginate-anything

使用angular resource 请求列表,如:
User = $resource($scope.users_url) User.query((results)-> $scope.users = results )

实现一个完成分页controller方法,如base_controller.rb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
class Api::BaseController < ApplicationController
# respond_to :json
private
def self.paginated_action(options = {})
before_filter(options) do |controller|
if request.headers['Range-Unit'] == 'items' &&
request.headers['Range'].present?
requested_from = nil
requested_to = nil
if request.headers['Range'] =~ /(\d+)-(\d*)/
requested_from, requested_to = $1.to_i, ($2.present? ? $2.to_i : Float::INFINITY)
end
if (requested_from > requested_to)
response.status = 416
headers['Content-Range'] = "*/#{total_items}"
render text: 'invalid pagination range'
return false
end
@kp_per_page = requested_to - requested_from + 1
@kp_page = requested_to / @kp_per_page + 1
end
end
after_filter(options) do |controller|
results = instance_variable_get("@#{controller_name}") # ex @users
if(results.length > 0)
response.status = 206
headers['Accept-Ranges'] = 'items'
headers['Range-Unit'] = 'items'
total_items = results.total_count
current_page = results.current_page
per = @kp_per_page
unless per.present?
per = 25
end
# binding.pry
requested_from = (results.current_page - 1) * per
available_to = (results.length - 1) + requested_from
headers['Content-Range'] = "#{requested_from}-#{available_to}/#{total_items < Float::INFINITY ? total_items : '*'}"
else
response.status = 204
headers['Content-Range'] = "*/0"
end
end
end
end

同时让UserController 继承BaseController:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class UserController < Api::BaseController
paginated_action only: [:user_data]
def index
# render json:@area_user
end
def user_data
@user = User.page(@kp_page).per(@kp_per_page)
render json: @user
end
def create
L.debug "提交上来的数据是#{area_user_param}"
@user = User.new area_user_param
if @user.save
render json: @user,status: :created
else
render json:@user.errors,status: :unprocessable_entity
end
end
private
def area_user_param
# binding.pry
params.require(:user).permit(:email,:mobile_phone,:password,:password_confirmation,:truename,:card_number) rescue nil
end
end

ionic 生成动态生成右拉城市菜单

发表于 2015-12-30   |   分类于 Ionic   |  

昨天有时间想重写下之前技术部小黄写的城市右拉, 主要用的功能是ionic 自带的 ion-side-menus 和 ionicSideMenuDelegate。
配置路由:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.state('choosePovince',{
cache:false,
url:'/choose_port',
abstract:true,
templateUrl:'templates/jiesongji/choose_porvince_main.html',
controller:'JiejiCtrl'
})
/**
* 右侧滑动
* @type {应用框架自带的滑动更好解决}
*/
.state('choosePovince.city',{
cache:false,
url:'/city',
views:{
'menuContent' :
{
templateUrl: "templates/jiesongji/porvince_main.html",
controller:'JiejiCtrl'
},
'right-menu':
{
templateUrl : "templates/jiesongji/city_right.html",
controller:'JiejiCtrl'
}
},
params: {
p_obj: null
}
})

第一层路由是声明右拉的父级关联模板。
Html模板choose_porvince_main.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar bar-header top-header">
<ion-nav-buttons>
<button class="button button-clear" ng-click="goBack()"><i class="icon ion-chevron-left"></i></button>
</ion-nav-buttons>
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="right">
<header class="bar bar-header top-header">
<h1 class="title">选择城市</h1>
</header>
<ion-content class="has-header">
<ion-nav-view name="right-menu">
</ion-nav-view>
</ion-content>
</ion-side-menu>
</ion-side-menus>

第二层路由声明右拉的模板与主模板。
Html 模板 porvince_main.html:

1
2
3
4
5
6
7
8
9
10
11
12
<ion-view title="选择城市">
<ion-content>
<ion-list>
<ion-item ng-click="right_menu(province.pro_id);" ng-repeat="province in ProvinceList">
<!-- <ion-item ng-click="show_province();"> -->
<span>{{province.province}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>

Html 模板 city_right.html

1
2
3
4
<ion-item ng-repeat="city in citys" style="height:50px;">
<span>{{city.city_name}}</span>
<span></span>
</ion-item>

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
* [show_province 加载省份]
* @return {[type]} [description]
*/
$scope.show_province = function(){
var param = {
code: "25c85dd791fd81f528eb550d6c107dcf"
};
chaXunProvinceFactory.getChaXunProvince(param).then(function(callback) {
if (callback.status == 200) {
// debugger
$state.go('choosePovince.city',{p_obj:callback.data.content});
// $scope.ProvinceList = callback.data.content;
}
});
}
/**
* 通过路由的对象传值,渲染ProvinceList显示数据
* @param {[type]} angular.isObject($stateParams.p_obj) [description]
* @return {[type]} [description]
*/
if (angular.isObject($stateParams.p_obj)) {
$scope.ProvinceList=$stateParams.p_obj;
};
/**
* 这里是重点,当点击事件发生时,向父级scope对象发送监听对象请求,传值。
* @param {[type]} obj [description]
* @return {[type]} [description]
*/
$scope.right_menu = function(obj){
$ionicSideMenuDelegate.toggleRight();
$scope.$emit('cities',obj);
}
/**
* 父页面监听,如果接收到点击请求,则通过接口获取动态数据,同时赋值给$scope对象。
* @param {[type]} e [description]
* @param {Object} d){ var param [description]
* @return {[type]} [description]
*/
$scope.$on('cities',function(e,d){
var param = {
code: "25c85dd791fd81f528eb550d6c107dcf",
pro_id: d
};
chaXunProvinceFactory.getChaXunCity(param).then(function(callback) {
if (callback.status == 200) {
$scope.citys = callback.data.content;
}
});
});

最终效果:
效果图
效果图

ionic 页面对象传值

发表于 2015-12-28   |   分类于 Ionic   |  

ionic 项目里常常遇到页面间传值的情况,一般是这样的:

1
2
3
4
5
6
7
8
9
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})

但遇到对象时,应做如下处理:

1
2
3
4
5
6
7
$stateProvider.state('users', {
url: '/users',
controller: 'UsersCtrl',
params: {
obj: null
}
})

1
2
3
function UserCtrl($stateParams) {
conrole.log($stateParams);
}
1
$state.go('users', {obj:yourObj});

mac 跳过App Store 更新系统

发表于 2015-12-15   |   分类于 mac   |  

sudo softwareupdate -i -a
应用它就可以跳过臃肿的app store 进行系统更新了。

ionic 手动清除页面缓存方法

发表于 2015-12-08   |   分类于 Ionic   |  

ionic手动清除页面方法:

1
2
3
4
$scope.$on("$ionicView.beforeEnter", function () {
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
});
1…8910…16
peterfei

peterfei

peterfei|技术|上主是我的牧者

80 日志
14 分类
62 标签
RSS
github
© 2025 peterfei
由 Hexo 强力驱动
主题 - NexT.Mist