Skip to content

Instantly share code, notes, and snippets.

View arnabdas's full-sized avatar

Arnab Das arnabdas

2 followers · 0 following
View GitHub Profile
@arnabdas
arnabdas / ngClassExample.html
Last active December 20, 2015 12:09
AngularJS ng-class
Update: Angular 1.1.5 added a ternary operator, so now we can simply write
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">
If you are using an earlier version of Angular, your two choices are:
(condition && result_if_true || result_if_false)
{true: 'result_if_true', false: 'result_if_false'}[condition]
item 2. above creates an object with two properties. The array syntax is used to select either the property with name true or the property with name false, and return the associated value.
E.g.,
@arnabdas
arnabdas / example.html
Created August 1, 2013 08:13
Tri-State Checkbox in AngularJS
<!-- http://plnkr.co/edit/N98IKTcHoZMCs18FjSRF?p=preview -->
The directive assumes that the checkboxes array contains objects that have an isSelected property and a desc property.
<tri-state-checkbox checkboxes="listelements"></tri-state-checkbox>
or
<!-- http://plnkr.co/edit/PTnzedhD6resVkApBE9K?p=preview -->
If you prefer to have the directive only render the tri-stated checkbox, hence the individual checkboxes are in the HTML:
<tri-state-checkbox checkboxes="listelements" class="select-all-cb">
</tri-state-checkbox>select all
@arnabdas
arnabdas / app.css
Created August 1, 2013 08:19
Stylized Checkbox in AngularJS
.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAABkCAYAAABkdwu1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB4VJREFUeNrsmVtvXNUVx9e5zOXMxY4vDElsTBwnk4sdxwFNSJS0qtSEBySoVKmtEEjtU8l3qIR4Q6IfoQ8VPPAQHpAoiIJLIFWahBaTluAkttMxk9iOPZn7/dz57z173DNO0IyDxQP1SEtzvM8+/1l777XXb69j6dSZF2irPjJt4WdLxVTPteT53mjej/sQ4+2qR4BdR2D9sAFYGKYI71uCNqwGy8NysDLMgDkbPWNCY7AEbAK2C+bf4J0JW4PdhM3AbgtRi/2Q1zPmUeL3r7zy2pkzZ2PrY3JdPg4Hv23j2rZduvDJ3zJv/flPf0RzRRjv4hXrYx49nXgmVqpUIdIUsl0HQi4Xs2yHDNOm0fjhQfSdhF2H3RWeWV4xNsydfjZ8PMREXHjBVRyXm2Tb5NQbZNfZtNFO2A4xFTqbu40LEHCdBp6DR5ZDloOHbeYZxGGNhk7VWo10nc05acJ8rUXyivGGTDZPpmWRaTIzybJsbuxaNwwuaFlWK0ZVYW1i6/FVrta4UEPXyTCagkzcQpthGvwe81IItIWOujGKfT4VdyRMvsMXgFyHLxbvLeFbktFud9wBrIcZDYfINEyS8bQkSaQqMvmwTrbNhuvjQ2RzKmLOEgHresXYH1UWkJo/AAckPIw++FZkBQHUXAC+EPa6VxnxzLqg7BErsMj+58yXWX/AT8yCWoBCWpBCYY0i8DgSCVNvbw8lk8miiP6M8JCLSSKfsYlkgXgAdkIEJNtOQTHBsmc7ZYQQ2043YCtivza8w6yITux7FtYr4kgRRmJIVSHI9mhWBKzlzRquaMwJsbsisn
@arnabdas
arnabdas / index.html
Created August 2, 2013 04:02
AngularJS with Twitter Bootstrap scaffold
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is an example page">
@arnabdas
arnabdas / embed.css
Last active December 20, 2015 13:19
Embed a gist into your web page
/* http://www.cowboycoded.com/2011/04/08/customizing-your-embedded-gists-with-css/ */
/* Line numbers column background has been made white and font size has been decreased in code */
.gist{
margin: 15px 0 !important;
}
.gist-file{
border: none !important;
}
@arnabdas
arnabdas / Picasa.html
Last active December 20, 2015 17:49 — forked from arthurnn/gist:1204385
Get the JSON response from Picasa about public album details
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
var json_Album_URI = "https://picasaweb.google.com/data/feed/base/"
+ "user/" + "dasarnab45"
+ "?alt=" + "json"
+ "&kind=" + "album"
+ "&hl=" + "en_US"
@arnabdas
arnabdas / app.js
Created August 27, 2013 09:10
Isolated scope and other types in directives of Angular JS
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'@attributeFoo',
isolatedBindingFoo:'=bindingFoo',
@arnabdas
arnabdas / app.css
Created August 28, 2013 05:23
Sortable Table In Angular JS
td { padding: 0.2em 1em; }
th { text-align: center; }
thead {
border-bottom: 2px solid black;
cursor: pointer;
}
/* http://www.greywyvern.com/code/php/binary2base64 */
.sort-true {
@arnabdas
arnabdas / AddRows&Columns.cs
Created September 19, 2013 19:04
Dynamically add rows and columns in WPF
ContentPanel.ColumnDefinitions.Clear();
ContentPanel.RowDefinitions.Clear();
int numColumnsToAdd = 4;
int numRowsToAdd = 4;
for (int column = 0; column < numColumnsToAdd; column++)
{
ColumnDefinition cd = new ColumnDefinition();
cd.Width = new GridLength(200);
ContentPanel.ColumnDefinitions.Add(cd);
}
@arnabdas
arnabdas / index.html
Created December 17, 2013 12:06
AngularJS: Services vs. Factories vs. Providers
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
{{serviceOutput}}
<br/><br/>