您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

ionic之创建列表

2024/5/5 5:00:45发布27次查看
1、实例背景
ionic创建动态列表,根据angularjs赋值
2、实现源码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>ionic之创建列表</title> <link rel="stylesheet" href="../css/ionic.css" /> <script type="text/javascript" src="../js/ionic.bundle.js" ></script> <script> var app = angular.module("initapp",["ionic"]); app.controller("initcontroller",function($scope){ $scope.users = [ {username:'赵思思'}, {username:'梨花胡'}, {username:'孙丽丽'}, {username:'胡思思'}, {username:'孙磊'} ]; }); </script> <title></title> </head> <body ng-app="initapp" ng-controller="initcontroller"> <ion-side-menus> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <span class="title">查询</span> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat="user in users"> {{user.username}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <label class="title">修改</label> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat="user in users"> {{user.username}} </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus> </body> </html>
3、实现结果
(1)初始化
(2)移动菜单
以上就是ionic之创建列表的内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product