zoukankan      html  css  js  c++  java
  • 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)移动菜单


  • 相关阅读:
    组件基础
    css 手稿
    HTML手稿
    Vmstat命令监控Linux资源并将数据通过图形化方式显示
    JAVA---类和对象
    JAVA---Graphics2D类
    JAVA---数组
    JAVA---图形处理
    JAVA----日历源代码
    SQL常用语句大全
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314045.html
Copyright © 2011-2022 走看看