Ionic + AngularJS - Fiddle

by Sajeetharan Sinnathurai

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<ion-pane>
        
<ion-header-bar align-title="right" class="bar-stable"  ng-controller="headercontroller">
          <span class="badge badge-positive">{{total_selected}} boule<span ng-if="total_selected > 1">s</span></span>
        <h1 class="title selected">{{total_price}} &euro;</h1>
</ion-header-bar>
        
<ion-content class="has-header" ng-controller="contentcontroller">

          <h2>Glace</h2>

<ion-list>            
  <ion-item ng-repeat="parfum in parfums" ng-class="{selected:parfum.quantite > 0}">
    {{parfum.nom}}
      
       <span class="item-note" style="font-size:20px;">
          <a class="icon ion-minus-circled button-clear button-dark" style="display:inline-block;" decrease></a>
       <div style="display:inline-block;" ng-class="{selected: parfum.quantite > 0}">{{parfum.quantite}}</div>
    <a class="icon ion-plus-circled button-clear button-dark" style="display:inline-block;" increase></a>
    </span>

  </ion-item>
</ion-list>
          
  
</ion-content>
      
<ion-footer-bar align-title="center" class="bar-assertive" ng-controller="footercontroller">
  <div class="buttons">
    <button class="button icon-left ion-chevron-left " >&nbsp;Convives</button>
  </div>
  <h1 class="title">{{title}}</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button icon-right ion-chevron-right">Terminer&nbsp;</button>
  </div>
</ion-footer-bar>
        
</ion-pane>


<script id="my-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      V!
    </ion-content>
  </div>
</script>

CSS

.selected{
    color:black;
    font-weight: 600;
}

JavaScript

var starter = angular.module('starter', ['ionic']);

 

starter.controller('contentcontroller', function($scope, $rootScope, $ionicModal, $ionicPopup) {
 
 
});