Skip to content

Instantly share code, notes, and snippets.

@csaftoiu
Last active November 20, 2015 17:11
Show Gist options
  • Save csaftoiu/a2555d04907ce4b1825b to your computer and use it in GitHub Desktop.
Save csaftoiu/a2555d04907ce4b1825b to your computer and use it in GitHub Desktop.
<div ng-init="showHide = 15;">
<div class="row">
<div class="small-8 medium-10 columns">
<range-slider ng-model="showHide"></range-slider>
</div>
<div class="small-4 medium-2 columns">
<input type="number" ng-model="showHide">
</div>
</div>
<div class="row">
<div class="small-4 medium-3 columns">
<button ng-click="hideSliders = !hideSliders">Toggle Sliders</button>
</div>
<div class="small-8 medium-9 columns">
<div class="row">
<div class="medium-4 columns">
<div ng-show="!hideSliders">
<label><code>ng-show</code> on containing <code>&lt;div&gt;</code></label>
<range-slider ng-model="showHide"></range-slider>
</div>
</div>
<div class="medium-8 columns">
<label><code>ng-hide</code> on <code>&lt;range-slider&gt;</code> itself</label>
<range-slider ng-model="showHide" ng-hide="hideSliders"></range-slider>
</div>
</div>
<div class="row">
<div class="medium-7 columns">
<div ng-if="!hideSliders">
<label><code>ng-if</code> on containing <code>&lt;div&gt;</code></label>
<range-slider ng-model="showHide"></range-slider>
</div>
</div>
<div class="medium-5 columns">
<label><code>ng-if</code> on <code>&lt;range-slider&gt;</code> itself</label>
<range-slider ng-model="showHide" ng-if="!hideSliders"></range-slider>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment