How to use ng-disabled with multiple expression

You may have ran into this issue when trying to bind a submit button with multiple disable conditions. The easiest way to do this is to embed the variable checking in the html as follows:

Both variable must be false for the button to be disabled:

<button class="button" ng-disabled="(!data.var1 && !data.var2) ? false : true">
</button>

Either variable can be false for the button to be disabled:

<button class="button" ng-disabled="(!data.var1 || !data.var2) ? false : true">
</button>

How to Localize Your Ionic Project

How to localize, translate and support multiple languages in your Ionic / AngularJS project:

1. Install Angular Translate:

npm install angular-translate
npm install angular-translate-loader-static-files

2. In your index.html make sure you include the js files:

<!-- translations -->
<script src="js/angular-translate.js"></script>
<script src="js/angular-translate-static-files.js"></script>

If you cannot find these js files in your project folder then you can find them on the project github pages.

3. In your app.js add the translation loading

angular.module('starter', ['ionic', 'starter.controllers', 'pascalprecht.translate'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
      return StatusBar.hide();
    }
  });
})

.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.useSanitizeValueStrategy('sanitize');

  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/locale-',
      suffix: '.json'
  });

  $translateProvider.preferredLanguage('en');
}])

4. Create a locale json file

Create a file named locale-en.json and a locale folder
the file should be in your www/locale/locale-en.json
Do not include any //comments in the JSON file

{
  "HelloWorld": "Hello World!",
  "Name": "My Name"
}

5. Add localization in your html file

<label>{{ 'HelloWorld' | translate }}</label>

6. Translating within your javascript

Make sure you import $translate within your controller before using it.

 $translate('HelloWorld').then( function (translation){
    console.log(translation);
  });

Or if you need to translate multiple terms:

 $translate(['HelloWorld', 'Goodbye']).then( function (translations){
    console.log(translations.HelloWorld);
    console.log(translations.Goodbye);
  });

For more information visit https://angular-translate.github.io/docs/#/guide.

How to Deploy Your Ionic Node.js app to Heroku

In this tutorial I will explain how to deploy one of my Ionic starters to Heroku with Dropbox. Both dropbox and heroku have a free tier that you can use. If you get serious about your app you can upgrade to heroku professional account which is similar to Amazon’s service but much easier to use.

Prerequisite: Sign up for dropbox.com and download their desktop client. Use one of my ionic starters with a node.js backend or use your own node project.

1. Create an account on Heroku.com

Screen Shot 2016-04-25 at 11.42.05 AM

Continue reading