ionic之创建列表
发布时间:2020-12-17 09:51:55 所属栏目:安全 来源:网络整理
导读:1、实例背景 ionic创建动态列表,根据AngularJS赋值 2、实现源码 !DOCTYPE htmlhtmlheadmeta charset="UTF-8"meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /titleionic之创建列表/titlelink rel="stylesheet" href
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)移动菜单
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |