Skip to content

Instantly share code, notes, and snippets.

@lnickers2004

lnickers2004/Angular_directives.html

Last active January 4, 2016 02:18
Show Gist options
  • Save lnickers2004/8553685 to your computer and use it in GitHub Desktop.
Save lnickers2004/8553685 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS: Recipes Cheatsheet angular Directives exampls
Raw
Angular_directives.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- application ng-app directive-->
<!--html ng-app="alphaApp"></html-->
<!-------------------------------------PAGE EXAMPLE ------------------------>
<!-- Home Screen -->
<div id="home-screen" data-role="view" data-title="Home"
ng-controller="HomeController">
<div class="view-content">
<h1>AlphaTrip</h1>
<ul data-role="listview" data-style="inset" ng-repeat="item in navItems">
<li>
<a ng-click="loadScreen(item)">{{item.name}}</a>
</li>
</ul>
</div>
</div>
<!------------------------------------------------------------------------>
<!--------------------------------------Anchor tags--------------------- ->
<!-- anchor tag ng-click directive and one-way databinding -->
<a ng-click="loadScreen(item)">{{item.name}}</a>
<!-- anchor tag ng-href directive and one-way databinding -->
<a data-role="listview-link" class="km-listview-link"
ng-click="resumeGame(game)">{{game.name}}</a>
<!-- anchor tag ng-click directive and one-way databinding -->
<a data-ng-href="#/message/{{ i.id }}">{{ i.title }}</a>
<!--------------------------------------Heading tags----------------------->
<!-- H1 with an ng-show directive and one-way databinding-->
<h1 class="welcome" ng-show="isLoggedIn">Welcome, {{username}}!</h1>
<!-- H1 with an ng-hide directive -->
<h3 ng-hide="isLoggedIn">Enter your credentials:</h3>
<!-- button with ng-disabled and ng-click directives-->
<button data-role="button" ng-disabled="game.players.length === 6"
ng-click="addNew()">Add New</button>
<!-- list item with ng-repeat directive-->
<input type="text" ng-model="player.name" ng-blur="doneEditing(player)"
autofocus />
<!-- list item with ng-repeat directive-->
<button data-role="button" ng-click="play()"
ng-hide="hidePlay()">Play</button>
<!-- button with ng-show and ng-click directive-->
<button data-role="button" class="next-button" ng-show="showPrevious"
ng-click="moveToPrevousLetter(player)">{{previousLetter}}</button>
<!-- button with ng-show and ng-click directive-->
<button data-role="button" class="next-button" ng-show="showNext"
ng-click="moveToNextLetter(player)">{{nextLetter}}</button>
<!-- button ng-click directive-->
<button data-role="button" ng-click="saveGame()">Save</button>
<!-- button with ng-click directive-->
<button data-role="button" ng-click="publishGame()">Publish</button>
<!-- button with ng-disabled and ng-click directive-->
<button class="btn btn-info"
data-ng-click="vm.save()"
data-ng-disabled="!vm.canSave">
<i class="icon-save"></i>Save
</button>
<!------------------------ DIV NG-CONTROLLER and NG-BIND DIRECTIVES -------->
<!-- div with ng-controller directive-->
<div id="saved-games-screen" data-role="view" data-title="Saved Games"
data-transition="slide" ng-controller="LoadGameController">DIV STUFF</div>
<!-- div with ng-controller directive-->
<div id="game-screen" data-role="view" data-title="Game"
data-transition="slide" ng-controller="GameController">DIV STUFF</div>
<!-- div with ng-controller directive-->
<div id="login-screen" data-role="view" data-title="Login"
ng-controller="LoginController">DIV STUFF</div>
<!-- div with ng-controller directive-->
<div ng-controller="NewGameController">DIV STUFF</div>
<!-- div with ng-bind directive-->
<div ng-bind="student.GPA"></div>
<!-- Cloak -->
<!-- div with ng-cload and ng-show directives-->
<div ng-cloak ng-show="ready" class="jumbotron">
<div class="container">
<h1 ng-bind="student.name">&nbsp;</h1>
</div>
</div>
<!-- --------------------------- LIST AND REPEATERS ------------->
<!-- list item with ng-repeat directive-->
<ul><li ng-repeat="game in games"></li></ul>
<!-- list item with ng-repeat directive-->
<ul><li ng-repeat="player in game.players">SOME STUFF</li></ul>
<!--NESTED REPEATED CONTROLLER: slick man THIS IS VERY COOL
there is a controller for each player in the repeat-->
<ul><li ng-repeat="player in game.players"
ng-controller ="PlayerController">REPEATED LIST STUFF</li></ul>
<!-- list with ng-hide directive-->
<ul data-role="listview" data-style="inset" ng-hide="isLoggedIn">
<li>LIST ITMEM</li>
</ul>
<!-- ------------------------------------------INPUT TYPES---------------->
<!-- password input with two-way ng-model directive-->
<input type="password" ng-model="password" />
<!-- submit input with ng-click and ng-hide directives-->
<input type="submit" id="login" data-role="button"
ng-click="login()" ng-hide="isLoggedIn" class="login-button"
value="Login" />
<!-- submit input with ng-repeat ng-show and ng-click directives-->
<input type="submit" id="logout" data-role="button"
ng-show="isLoggedIn"
ng-click="logout()" class="login-button" value="Logout" />
<!-- text input with ng-model two-way directive-->
<input type="text" ng-model="username" />
<!-- text input with ng-model two-way directive-->
<input type="text" ng-model="game.name" />
<!-- text input with ng-blur and ng-model two-way directive-->
<input type="text" ng-model="player.name"
ng-blur="doneEditing(player)" autofocus />
<!-------------------------------------ng-class example ----------------->
<div class="well-sm mgm-corners-top"
ng-class="{approvedFlight:flight.approved}">
<h3>{{flight.airline}}
<button class="pull-right btn-sm"
ng-class="{'btn-success':flight.approved};"
ng-click="selectFlight(flight) ">
Select&nbsp;&nbsp;&nbsp;
<i class="glyphicon
glyphicon-ok ng-class:{visibilityOff:!flight.approved};"></i>
</button>
</h3>
</div>
<!------- CONTROLLER AS SYSNTAX FULL EXAMPLE ----->
<section class="mainbar" data-ng-controller="speakerdetail as vm">
<section class="matter">
<div class="container-fluid">
<div>
<button class="btn btn-info"
data-ng-click="vm.goBack()">
<i class="icon-hand-left"></i>Back
</button>
<button class="btn btn-info"
data-ng-click="vm.cancel()"
data-ng-disabled="!vm.canSave">
<i class="icon-undo"></i>Cancel
</button>
<button class="btn btn-info"
data-ng-click="vm.save()"
data-ng-disabled="!vm.canSave">
<i class="icon-save"></i>Save
</button>
<span data-ng-show="vm.hasChanges"
class="dissolve-animation ng-hide">
<i class="icon-asterisk icon-asterisk-large"></i>
</span>
</div>
<div class="widget wgreen">
<div data-cc-widget-header
title="Edit {{vm.speaker.fullName || 'New Speaker'}}" ">
</div>
<div class="widget-content user">
<div>
<div>
<label>First Name</label>
<input data-ng-model="vm.speaker.firstName"
data-z-validate
placeholder="First Name" />
</div>
<div>
<label>Last Name</label>
<input data-ng-model="vm.speaker.lastName"
data-z-validate
placeholder="Last Name" />
</div>
<div>
<label>Email</label>
<input data-ng-model="vm.speaker.email"
data-z-validate
placeholder="Email" />
</div>
<div>
<label>Blog</label>
<input data-ng-model="vm.speaker.blog"
data-z-validate
placeholder="Blog" />
</div>
<div>
<label>Twitter</label>
<input data-ng-model="vm.speaker.twitter"
data-z-validate
placeholder="Twitter" />
</div>
<div>
<img data-cc-img-person
="{{vm.speaker.imageSource}}"
class="img-polaroid"/>
</div>
<div>
<label>Bio</label>
<textarea data-ng-model="vm.speaker.bio"
placeholder="Enter speaker bio">
</textarea>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<!------------------------------FORM EXAMPLES example 1 ----------------->
<!-- ng-keyup event example-->
<form class="form-inline">
<div class="input-append row-fluid">
<input type="text" class="span8"
placeholder="Find sessions"
data-ng-model="vm.searchText"
data-ng-keyup="vm.search($event)">
<a class="btn btn-info btn-notext" data-ng-click="vm.search($event)">
<i class="icon-search"></i></a>
</div>
</form>
<!-------------------------------------FORM EXAMPLES example 2 ---------->
<!-- Form with ng-model ng-submit ng-minlength ng-show ng-disabled-->
<h3>New Topic</h3>
<form name="newTopicForm" novalidate data-ng-submit="save()">
<fieldset>
<div>
<label for="title">Title</label>
<input name="title" type="text" data-ng-model="newTopic.title"
required data-ng-minlength="5" />
<span class="error"
data-ng-show="newTopicForm.title.$error.required">*</span>
<span class="error"
data-ng-show="newTopicForm.title.$error.minlength">
Minimum 5 Characters</span>
</div>
<div>
<label for="body">Body</label>
<textarea name="body" rows="5" cols="30"
data-ng-model="newTopic.body"
required data-ng-minlength="15" />
<span class="error"
data-ng-show="newTopicForm.body.$error.required">*</span>
<span class="error"
data-ng-show="newTopicForm.body.$error.minlength">
Minimum 15 Characters</span>
</div>
<div>
<input type="submit" class="btn" value="Save"
data-ng-disabled="newTopicForm.$invalid" />
<a href="#/" class="btn">Cancel</a>
</div>
</fieldset>
</form>
<!-------------------------------------FORM EXAMPLES example 2 ---------->
<!-- Form with ng-model ng-submit ng-minlength ng-show ng-disabled-->
<h3>Add Reply</h3>
<form name="newReplyForm" novalidate data-ng-submit="addReply()">
<fieldset>
<div>
<label for="body">Body</label>
<textarea name="body" rows="5" cols="30"
data-ng-model="newReply.body" required data-ng-minlength="15" />
<span class="error"
data-ng-show="newReplyForm.body.$error.required">*</span>
<span class="error"
data-ng-show="newReplyForm.body.$error.minlength">
Minimum 15 Characters</span>
</div>
<div>
<input type="submit" class="btn" value="Save"
data-ng-disabled="newReplyForm.$invalid" />
</div>
</fieldset>
</form>
<!-------------------------------------ng-if example -------------------->
<div class="page-title pull-left">{{title}}</div>
<small class="page-title-subtle"
data-ng-show="subtitle">({{subtitle}})</small>
<div class="widget-icons pull-right" data-ng-if="allowCollapse">
<a data-cc-widget-minimize></a>
</div>
<small class="pull-right page-title-subtle"
data-ng-show="rightText">{{rightText}}</small>
<div class="clearfix"></div>
<!---------------------------ng-switch ng-switch-when example ---------->
<div class="widget-content referrer" data-ng-switch="!!vm.wip.length">
<div data-ng-switch-when="false">No work in progress found</div>
<table class="table table-bordered table-hover"
data-ng-switch-when="true">
<thead>
<tr>
<th><a data-ng-click="vm.setSort('entityName')"
href="">Item</a></th>
<th><a data-ng-click="vm.setSort('description')"
href="">Description</a></th>
<th><a data-ng-click="vm.setSort('state')"
href="">State</a></th>
<th><a data-ng-click="vm.setSort('date')"
href="">Date Changed</a></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in vm.wip | orderBy:vm.predicate:vm.reverse"
data-ng-click="vm.gotoWip(item)">
<td>{{item.entityName}}</td>
<td>{{item.description}}</td>
<td>{{item.state}}</td>
<td>{{item.date | date:'MM/dd/yyyy @ h:mma'}}</td>
</tr>
</tbody>
</table>
</div>
<!---------checkbox and option select ng-selected example ------------>
Check me to select:
<input type="checkbox" ng-model="selected"><br />
<select>
<option>Hello!</option>
<option id="greet" ng-selected="selected">Greetings!</option>
</select>
<!--------------------------gravatar image ng-src example ------------->
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" />
<!-------------------------------------ng-read-only example ---------->
<input type="text" ng-readonly="checked" value="I'm Angular" />
<!---------------------ng-change ng-mousewheel ng-read-only example -->
<input type="text" ng-model="hours" ng-change="updateHours()"
class="form-control text-center"
ng-mousewheel="incrementHours()" ng-readonly="readonlyInput"
maxlength="2">
<!-------------------------------------checkbox ng-checked example ---------------------->
<input id="checkSlave" type="checkbox" ng-checked="master">
Check me check multiple:
<input type="checkbox" ng-model="checked"><br />
<!-------------------------------------checkbox ng-false-value ng-true-value example ---------------------->
<form name="myForm" ng-controller="Ctrl">
Value1:
<input type="checkbox" ng-model="value1">
<br />
Value2:
<input type="checkbox" ng-model="value2"
ng-true-value="YES" ng-false-value="NO">
<br />
<span>value1 = {{value1}}</span>
<br />
<span>value2 = {{value2}}</span>
<br />
</form>
<!-------------------------------------select ng-options example ---------------------->
<select data-ng-options="r.name for r in vm.rooms"
data-z-validate
data-ng-model="vm.session.room">
</select>
<!-------------------------------------select ng-multiple example ---------------------->
<select id="select" ng-multiple="checked">
<option>Misko</option>
<option>Igor</option>
<option>Vojta</option>
<option>Di</option>
</select>
<!------------------------------ng-style ng-class ng-click example ------->
<div class="modal-backdrop fade" ng-class="{in: animate}"
ng-style="{'z-index': 1040 + index*10}"
ng-click="close($event)"></div>
<!------------------------------ng-switch usage example ------->
<any ng-switch="expression">
<ANY ng-switch-when="matchValue1">...</ANY>
<ANY ng-switch-when="matchValue2">...</ANY>
<ANY ng-switch-default>...</ANY>
</any>
<!-- ng-include example -->
<div ng-include="'partials/navbar.html'" ng-controller="scNavBarCtrl"></div>
<div ng-include="'partials/registration.html'" ng-controller="scRegistrationCtrl"></div>
</body>
</html>
Raw
formatted.html
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- application ng-app directive-->
<!--html ng-app="alphaApp"></html-->
<!-------------------------------------PAGE EXAMPLE ------------------------>
<!-- Home Screen -->
<div id="home-screen" data-role="view" data-title="Home"
ng-controller="HomeController">
<div class="view-content">
<h1>AlphaTrip</h1>
<ul data-role="listview" data-style="inset" ng-repeat="item in navItems">
<li>
<a ng-click="loadScreen(item)">{{item.name}}</a>
</li>
</ul>
</div>
</div>
<!------------------------------------------------------------------------>
<!--------------------------------------Anchor tags--------------------- ->
<!-- anchor tag ng-click directive and one-way databinding -->
<a ng-click="loadScreen(item)">{{item.name}}</a>
<!-- anchor tag ng-href directive and one-way databinding -->
<a data-role="listview-link" class="km-listview-link"
ng-click="resumeGame(game)">{{game.name}}</a>
<!-- anchor tag ng-click directive and one-way databinding -->
<a data-ng-href="#/message/{{ i.id }}">{{ i.title }}</a>
<!--------------------------------------Heading tags----------------------->
<!-- H1 with an ng-show directive and one-way databinding-->
<h1 class="welcome" ng-show="isLoggedIn">Welcome, {{username}}!</h1>
<!-- H1 with an ng-hide directive -->
<h3 ng-hide="isLoggedIn">Enter your credentials:</h3>
<!-- button with ng-disabled and ng-click directives-->
<button data-role="button" ng-disabled="game.players.length === 6"
ng-click="addNew()">Add New</button>
<!-- list item with ng-repeat directive-->
<input type="text" ng-model="player.name" ng-blur="doneEditing(player)"
autofocus />
<!-- list item with ng-repeat directive-->
<button data-role="button" ng-click="play()"
ng-hide="hidePlay()">Play</button>
<!-- button with ng-show and ng-click directive-->
<button data-role="button" class="next-button" ng-show="showPrevious"
ng-click="moveToPrevousLetter(player)">{{previousLetter}}</button>
<!-- button with ng-show and ng-click directive-->
<button data-role="button" class="next-button" ng-show="showNext"
ng-click="moveToNextLetter(player)">{{nextLetter}}</button>
<!-- button ng-click directive-->
<button data-role="button" ng-click="saveGame()">Save</button>
<!-- button with ng-click directive-->
<button data-role="button" ng-click="publishGame()">Publish</button>
<!-- button with ng-disabled and ng-click directive-->
<button class="btn btn-info"
data-ng-click="vm.save()"
data-ng-disabled="!vm.canSave">
<i class="icon-save"></i>Save
</button>
<!------------------------ DIV NG-CONTROLLER and NG-BIND DIRECTIVES -------->
<!-- div with ng-controller directive-->
<div id="saved-games-screen" data-role="view" data-title="Saved Games"
data-transition="slide" ng-controller="LoadGameController">DIV STUFF</div>
<!-- div with ng-controller directive-->
<div id="game-screen" data-role="view" data-title="Game"
data-transition="slide" ng-controller="GameController">DIV STUFF</div>
<!-- div with ng-controller directive-->
<div id="login-screen" data-role="view" data-title="Login"
ng-controller="LoginController">DIV STUFF</div>
<!-- div with ng-controller directive-->
<div ng-controller="NewGameController">DIV STUFF</div>
<!-- div with ng-bind directive-->
<div ng-bind="student.GPA"></div>
<!-- Cloak -->
<!-- div with ng-cload and ng-show directives-->
<div ng-cloak ng-show="ready" class="jumbotron">
<div class="container">
<h1 ng-bind="student.name">&nbsp;</h1>
</div>
</div>
<!-- --------------------------- LIST AND REPEATERS ------------->
<!-- list item with ng-repeat directive-->
<ul><li ng-repeat="game in games"></li></ul>
<!-- list item with ng-repeat directive-->
<ul><li ng-repeat="player in game.players">SOME STUFF</li></ul>
<!--NESTED REPEATED CONTROLLER: slick man THIS IS VERY COOL
there is a controller for each player in the repeat-->
<ul><li ng-repeat="player in game.players"
ng-controller ="PlayerController">REPEATED LIST STUFF</li></ul>
<!-- list with ng-hide directive-->
<ul data-role="listview" data-style="inset" ng-hide="isLoggedIn">
<li>LIST ITMEM</li>
</ul>
<!-- ------------------------------------------INPUT TYPES---------------->
<!-- password input with two-way ng-model directive-->
<input type="password" ng-model="password" />
<!-- submit input with ng-click and ng-hide directives-->
<input type="submit" id="login" data-role="button"
ng-click="login()" ng-hide="isLoggedIn" class="login-button"
value="Login" />
<!-- submit input with ng-repeat ng-show and ng-click directives-->
<input type="submit" id="logout" data-role="button"
ng-show="isLoggedIn"
ng-click="logout()" class="login-button" value="Logout" />
<!-- text input with ng-model two-way directive-->
<input type="text" ng-model="username" />
<!-- text input with ng-model two-way directive-->
<input type="text" ng-model="game.name" />
<!-- text input with ng-blur and ng-model two-way directive-->
<input type="text" ng-model="player.name"
ng-blur="doneEditing(player)" autofocus />
<!-------------------------------------ng-class example ----------------->
<div class="well-sm mgm-corners-top"
ng-class="{approvedFlight:flight.approved}">
<h3>{{flight.airline}}
<button class="pull-right btn-sm"
ng-class="{'btn-success':flight.approved};"
ng-click="selectFlight(flight) ">
Select&nbsp;&nbsp;&nbsp;
<i class="glyphicon
glyphicon-ok ng-class:{visibilityOff:!flight.approved};"></i>
</button>
</h3>
</div>
<!------- CONTROLLER AS SYSNTAX FULL EXAMPLE ----->
<section class="mainbar" data-ng-controller="speakerdetail as vm">
<section class="matter">
<div class="container-fluid">
<div>
<button class="btn btn-info"
data-ng-click="vm.goBack()">
<i class="icon-hand-left"></i>Back
</button>
<button class="btn btn-info"
data-ng-click="vm.cancel()"
data-ng-disabled="!vm.canSave">
<i class="icon-undo"></i>Cancel
</button>
<button class="btn btn-info"
data-ng-click="vm.save()"
data-ng-disabled="!vm.canSave">
<i class="icon-save"></i>Save
</button>
<span data-ng-show="vm.hasChanges"
class="dissolve-animation ng-hide">
<i class="icon-asterisk icon-asterisk-large"></i>
</span>
</div>
<div class="widget wgreen">
<div data-cc-widget-header
title="Edit {{vm.speaker.fullName || 'New Speaker'}}" ">
</div>
<div class="widget-content user">
<div>
<div>
<label>First Name</label>
<input data-ng-model="vm.speaker.firstName"
data-z-validate
placeholder="First Name" />
</div>
<div>
<label>Last Name</label>
<input data-ng-model="vm.speaker.lastName"
data-z-validate
placeholder="Last Name" />
</div>
<div>
<label>Email</label>
<input data-ng-model="vm.speaker.email"
data-z-validate
placeholder="Email" />
</div>
<div>
<label>Blog</label>
<input data-ng-model="vm.speaker.blog"
data-z-validate
placeholder="Blog" />
</div>
<div>
<label>Twitter</label>
<input data-ng-model="vm.speaker.twitter"
data-z-validate
placeholder="Twitter" />
</div>
<div>
<img data-cc-img-person
="{{vm.speaker.imageSource}}"
class="img-polaroid"/>
</div>
<div>
<label>Bio</label>
<textarea data-ng-model="vm.speaker.bio"
placeholder="Enter speaker bio">
</textarea>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<!------------------------------FORM EXAMPLES example 1 ----------------->
<!-- ng-keyup event example-->
<form class="form-inline">
<div class="input-append row-fluid">
<input type="text" class="span8"
placeholder="Find sessions"
data-ng-model="vm.searchText"
data-ng-keyup="vm.search($event)">
<a class="btn btn-info btn-notext" data-ng-click="vm.search($event)">
<i class="icon-search"></i></a>
</div>
</form>
<!-------------------------------------FORM EXAMPLES example 2 ---------->
<!-- Form with ng-model ng-submit ng-minlength ng-show ng-disabled-->
<h3>New Topic</h3>
<form name="newTopicForm" novalidate data-ng-submit="save()">
<fieldset>
<div>
<label for="title">Title</label>
<input name="title" type="text" data-ng-model="newTopic.title"
required data-ng-minlength="5" />
<span class="error"
data-ng-show="newTopicForm.title.$error.required">*</span>
<span class="error"
data-ng-show="newTopicForm.title.$error.minlength">
Minimum 5 Characters</span>
</div>
<div>
<label for="body">Body</label>
<textarea name="body" rows="5" cols="30"
data-ng-model="newTopic.body"
required data-ng-minlength="15" />
<span class="error"
data-ng-show="newTopicForm.body.$error.required">*</span>
<span class="error"
data-ng-show="newTopicForm.body.$error.minlength">
Minimum 15 Characters</span>
</div>
<div>
<input type="submit" class="btn" value="Save"
data-ng-disabled="newTopicForm.$invalid" />
<a href="#/" class="btn">Cancel</a>
</div>
</fieldset>
</form>
<!-------------------------------------FORM EXAMPLES example 2 ---------->
<!-- Form with ng-model ng-submit ng-minlength ng-show ng-disabled-->
<h3>Add Reply</h3>
<form name="newReplyForm" novalidate data-ng-submit="addReply()">
<fieldset>
<div>
<label for="body">Body</label>
<textarea name="body" rows="5" cols="30"
data-ng-model="newReply.body" required data-ng-minlength="15" />
<span class="error"
data-ng-show="newReplyForm.body.$error.required">*</span>
<span class="error"
data-ng-show="newReplyForm.body.$error.minlength">
Minimum 15 Characters</span>
</div>
<div>
<input type="submit" class="btn" value="Save"
data-ng-disabled="newReplyForm.$invalid" />
</div>
</fieldset>
</form>
<!-------------------------------------ng-if example -------------------->
<div class="page-title pull-left">{{title}}</div>
<small class="page-title-subtle"
data-ng-show="subtitle">({{subtitle}})</small>
<div class="widget-icons pull-right" data-ng-if="allowCollapse">
<a data-cc-widget-minimize></a>
</div>
<small class="pull-right page-title-subtle"
data-ng-show="rightText">{{rightText}}</small>
<div class="clearfix"></div>
<!---------------------------ng-switch ng-switch-when example ---------->
<div class="widget-content referrer" data-ng-switch="!!vm.wip.length">
<div data-ng-switch-when="false">No work in progress found</div>
<table class="table table-bordered table-hover"
data-ng-switch-when="true">
<thead>
<tr>
<th><a data-ng-click="vm.setSort('entityName')"
href="">Item</a></th>
<th><a data-ng-click="vm.setSort('description')"
href="">Description</a></th>
<th><a data-ng-click="vm.setSort('state')"
href="">State</a></th>
<th><a data-ng-click="vm.setSort('date')"
href="">Date Changed</a></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in vm.wip | orderBy:vm.predicate:vm.reverse"
data-ng-click="vm.gotoWip(item)">
<td>{{item.entityName}}</td>
<td>{{item.description}}</td>
<td>{{item.state}}</td>
<td>{{item.date | date:'MM/dd/yyyy @ h:mma'}}</td>
</tr>
</tbody>
</table>
</div>
<!---------checkbox and option select ng-selected example ------------>
Check me to select:
<input type="checkbox" ng-model="selected"><br />
<select>
<option>Hello!</option>
<option id="greet" ng-selected="selected">Greetings!</option>
</select>
<!--------------------------gravatar image ng-src example ------------->
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" />
<!-------------------------------------ng-read-only example ---------->
<input type="text" ng-readonly="checked" value="I'm Angular" />
<!---------------------ng-change ng-mousewheel ng-read-only example -->
<input type="text" ng-model="hours" ng-change="updateHours()"
class="form-control text-center"
ng-mousewheel="incrementHours()" ng-readonly="readonlyInput"
maxlength="2">
<!-------------------------------------checkbox ng-checked example ---------------------->
<input id="checkSlave" type="checkbox" ng-checked="master">
Check me check multiple:
<input type="checkbox" ng-model="checked"><br />
<!-------------------------------------checkbox ng-false-value ng-true-value example ---------------------->
<form name="myForm" ng-controller="Ctrl">
Value1:
<input type="checkbox" ng-model="value1">
<br />
Value2:
<input type="checkbox" ng-model="value2"
ng-true-value="YES" ng-false-value="NO">
<br />
<span>value1 = {{value1}}</span>
<br />
<span>value2 = {{value2}}</span>
<br />
</form>
<!-------------------------------------select ng-options example ---------------------->
<select data-ng-options="r.name for r in vm.rooms"
data-z-validate
data-ng-model="vm.session.room">
</select>
<!-------------------------------------select ng-multiple example ---------------------->
<select id="select" ng-multiple="checked">
<option>Misko</option>
<option>Igor</option>
<option>Vojta</option>
<option>Di</option>
</select>
<!------------------------------ng-style ng-class ng-click example ------->
<div class="modal-backdrop fade" ng-class="{in: animate}"
ng-style="{'z-index': 1040 + index*10}"
ng-click="close($event)"></div>
<!------------------------------ng-switch usage example ------->
<any ng-switch="expression">
<ANY ng-switch-when="matchValue1">...</ANY>
<ANY ng-switch-when="matchValue2">...</ANY>
<ANY ng-switch-default>...</ANY>
</any>
<!-- ng-include example -->
<div ng-include="'partials/navbar.html'" ng-controller="scNavBarCtrl"></div>
<div ng-include="'partials/registration.html'" ng-controller="scRegistrationCtrl"></div>
</body>
</html>
@lnickers2004
Copy link
Author

Created a quick and extremly dirty psuedo recipe cheatsheet for quick search of angularjs directives

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment