ionic之创建列表
程序员文章站
2022-05-04 19:33:42
...
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之创建列表的内容,更多相关内容请关注PHP中文网(www.php.cn)!