首页 > 代码库 > 稍复杂的ionic例子：显示一个列表，并且允许点击进入列表项
稍复杂的ionic例子：显示一个列表，并且允许点击进入列表项
这个例子，按照MVC的方式进行了分层，下面是代码：
demo3.htm
<!DOCTYPE html><html ng-app="app"><head> <meta charset="utf-8"> <title>angular-demo3</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script> <script type="text/javascript" src="js/demo3_app.js"></script> <script type="text/javascript" src="js/demo3_controllers.js"></script> <script type="text/javascript" src="js/demo3_services.js"></script></head><body> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view></body></html>
demo3_app.js
var app = angular.module(‘app‘,[‘ionic‘,‘demo3.controllers‘,‘demo3.services‘]);app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state(‘chats‘, { url: ‘/chats‘, templateUrl: ‘templates/chats.html‘, controller: ‘ChatsCtrl‘ }) .state(‘chat-detail‘, { url: ‘/chats/:chatId‘, templateUrl: ‘templates/chat-detail.html‘, controller: ‘ChatDetailCtrl‘ }); $urlRouterProvider.otherwise(‘/chats‘);});
demo3_controllers.js
angular.module(‘demo3.controllers‘,[]).controller(‘ChatsCtrl‘, function($scope, Chats) { $scope.chats = Chats.all(); $scope.remove = function(chat) { Chats.remove(chat); }}).controller(‘ChatDetailCtrl‘, function($scope, $stateParams, Chats) { $scope.chat = Chats.get($stateParams.chatId);});
demo3_services.js
angular.module(‘demo3.services‘,[]).factory(‘Chats‘,function(){ var chats = [{ id: 0, name: ‘Ben Sparrow‘, lastText: ‘You on your way?‘, face: ‘https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/cc11728b4710b912d53c66bdc5fdfc03934522f7.jpg‘ }, { id: 1, name: ‘Max Lynx‘, lastText: ‘Hey, it\‘s me‘, face: ‘https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/5243fbf2b21193130a116ff363380cd791238d27.jpg‘ },{ id: 2, name: ‘Adam Bradleyson‘, lastText: ‘I should buy a boat‘, face: ‘https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/95eef01f3a292df514390469ba315c6035a873d0.jpg‘ }, { id: 3, name: ‘Perry Governor‘, lastText: ‘Look at my mukluks!‘, face: ‘https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/500fd9f9d72a6059884e49662e34349b033bba74.jpg‘ }, { id: 4, name: ‘Mike Harrington‘, lastText: ‘This is wicked good ice cream.‘, face: ‘https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/dpp/pic/item/9e3df8dcd100baa1efd9eec74110b912c9fc2ed0.jpg‘ }]; return { all:function() { return chats; }, remove:function(chat) { chats.splice(chats.indexOf(chat), 1); }, get: function(chatId) { for (var i = 0; i < chats.length; i++) { if (chats[i].id === parseInt(chatId)) { return chats[i]; } } return null; } };});
chats.html
<ion-view view-title="Chats"> <ion-content> <ion-list> <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/chats/{{chat.id}}"> <img ng-src="{{chat.face}}"> <h2>{{chat.name}}</h2> <p>{{chat.lastText}}</p> <i class="icon ion-chevron-right icon-accessory"></i> <ion-option-button class="button-assertive" ng-click="remove(chat)"> Delete </ion-option-button> </ion-item> </ion-list> </ion-content></ion-view>
chat-detail.html
<ion-view view-title="{{chat.name}}"> <ion-content class="padding"> <img ng-src="{{chat.face}}" style="width: 64px; height: 64px"> <p> {{chat.lastText}} </p> </ion-content></ion-view>
有几个地方简单分析一下：
1、页面路由在设置chat-detail页面时，使用了变量:chatId，那么在controller定义的时候通过$stateParams.chatId可以得到该变量
2、注意demo3_services.js页面中使用factory定义服务的方式，在controller中使用Chats使用该服务
3、注意demo3_app.js页面中引用demo3_controllers.js和demo3_services.js，使用MVC的方式
稍复杂的ionic例子：显示一个列表，并且允许点击进入列表项
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。