您好,欢迎访问一九零五行业门户网

ionic之创建列表

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之创建列表的内容。
其它类似信息

推荐信息