Skip to content

Instantly share code, notes, and snippets.

/daAyx.markdown

Created April 10, 2015 17:59
Show Gist options
  • Save anonymous/df8acdd3e495ce4ffa3d to your computer and use it in GitHub Desktop.
Save anonymous/df8acdd3e495ce4ffa3d to your computer and use it in GitHub Desktop.
Download ZIP
daAyx
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Apps </title>
<link href="http://code.ionicframework.com/0.9.26/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.26/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="BrandCtrl">
<ion-content>
<ion-list scroll="false">
<ion-item ng-repeat="brand in brands"
item="brand">
{{brand.title}}
<br>
<br>
<ion-scroll direction="x">
<div ng-repeat="app in brand.apps" item="app" style='display: inline-block; margin: 10px;'>
<i class="{{app.icon}}" style='font-size: 30px;'></i>
{{app.title}}
<br>
<br>
</div>
</ion-scroll>
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
Raw
script.js
angular.module('ionicApp', ['ionic'])
.controller('BrandCtrl', function($scope) {
$scope.brands = [
{title: "Brand 1", apps: [
{icon: 'ion-heart', title: 'Heart'}
, {icon: 'ion-medkit', title: 'Medkit'}
, {icon: 'ion-pinpoint', title: 'Pinpoint'}
, {icon: 'ion-pizza', title: 'Pizza'}
]}
, {title: "Brand 2"}
, {title: "Brand 3"}
, {title: "Brand 4"}
, {title: "Brand 5", apps: [
{icon: 'ion-female', title: 'Female'}
, {icon: 'ion-bug', title: 'Bug'}
, {icon: 'ion-calculator', title: 'Calculator'}
, {icon: 'ion-earth', title: 'Earth'}
, {icon: 'ion-plane', title: 'Plane'}
]}
, {title: "Brand 6"}
, {title: "Brand 7"}
];
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment