JSFiddle - React, Tailwind, and code Playground

by Niels Krijger

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/1.3.1/css/ionic.css">
<script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script>
<ion-view title="My Page" ng-controller="MyCtrl">
  <ion-content id="ioncontent">
    <ion-scroll id="ionscroll" direction="x" scrollbar-x="false" overflow-scroll="false">
      <div ng-repeat="(key, value) in elements" class="element">
        <i class="label-icon fa fa-tag"></i>
        <span>{{value}}</span>
      </div>

    </ion-scroll>
    <button ng-click="addElement()">Add element</button>
  </ion-content>
</ion-view>

CSS

* { 
  font-family: sans-serif;
}

body { 
  padding: 15px;
}

#ioncontent {
  white-space: nowrap;
}

#ionscroll {
  border: 1px solid red;
  margin: 20px;
}

.scroll {
  flex-direction: row;
}

.scroll-x {
  overflow-x: hidden !important; // Hide scrollbar in safari
}

.element {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px;
  font-size: 80%;
  margin: 10px;
}

JavaScript

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
    $scope.elements = [];
    
    var counter = 0;
    
    $scope.addElement = function() {
    	counter++;
      console.log("Counter", counter)
      $scope.elements.push('Element' + counter);
    }
});