Posted on   |   In ,   |  

####Objective####

  1. Example of showing to filter by Multiple Specific Model Properties by using [filter function][0]
  2. Example of [currency filter][1] <!-- more --> <iframe style="width: 100%; height: 320px" src="http://embed.plnkr.co/scuPYt" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

MarkupGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div class="row">
    <input class="span4 pull-right" type="text" placeholder="Search for smartphone in model and brand" ng-model="query">
</div>
<div class="row">
    <table id="results" class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>Brand</th>
            <th>Model</th>
            <th>Price</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="smartphone in smartphones | filter: search ">
            <td id="brand"></td>
            <td id="model"></td>
            <td id="price"></td>
        </tr>
        </tbody>
    </table>
</div>
AngularJSGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
var app = angular.module('ngApp', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.smartphones = [
        {brand: 'Apple', model: 'iPhone 4S', price: '999'},
        {brand: 'Samsung', model: 'SIII', price: '888' },
        {brand: 'LG', model: 'Optimus', price: '777'},
        {brand: 'htc', model: 'Desire', price: '666'},
        {brand: 'Nokia', model: 'N9', price: '555'}
    ];
    $scope.search = function (row) {
        return !!((row.brand.indexOf($scope.query || '') !== -1 || row.model.indexOf($scope.query || '') !== -1));
    };
}]);
[0]:http://docs.angularjs.org/api/ng.filter:filter [1]:http://docs.angularjs.org/api/ng.filter:currency

Posted on   |   In ,   |  

####Objective####

  1. Example of showing the difference between observe and watch
  2. Example of showing $eval

<!-- more --> <iframe style="margin: 20px 0; width: 100%; height: 250px" src="http://embed.plnkr.co/jxGl8aLKy1snCMlRbRxC" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

MarkupGithub
1
2
3
4
<input type="text" ng-model="xinput" />
<div my-dir textinput='xinput' valinput=''></div>

AngularJSGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var app = angular.module('ngApp', [])
    .directive('myDir', function () {
        "use strict";
        return {
            scope: true,
            template: '<div>observe-textinput: </div><div>observe-valinput: </div><div>eval: </div><div>eval2: </div><div>watch: </div>',
            link: function (scope, iElement, iAttrs) {
                iAttrs.$observe('textinput', function (value) {
                    scope.observe1 = value;
                });
                iAttrs.$observe('valinput', function (value) {
                    scope.observe2 = value;
                });
                scope.$watch(iAttrs.textinput, function (newVal, oldVal, scope) {
                    scope.evalVal = scope.$eval(iAttrs.textinput);
                    scope.evalVal2 = scope.$eval('xinput');
                    scope.watchVal = newVal;
                }, false);
            }
        };
    });
app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.xinput = 'test';
}]);

Posted on   |   In ,   |  

####Objective####

  1. Example of showing the relationship between scope and isolated scope
  2. Example of using instance attributes in link function in directive and interacting with parent scope

####Notice####

  1. There are 3 scopes in this example.

<!-- more --> <iframe style="margin: 20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/uQSLHhv6uz2mCdmtPWSg" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

MarkupGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div data-my-component attribute-foo="" binding-foo="foo"
     isolated-expression-foo="updateFoo(newFoo)" non-iso-attribute="foo">
    <h4>Attribute <span class="badge badge-important">@</span></h4>
    <div>
        <strong>get:</strong> 
    </div>
    <div class="row">
        <span class="span3"><strong>set:</strong> <input type="text" ng-model="isolatedAttributeFoo"></span>
        <span class="span6 text-success">  <i> This does not update the parent scope.</i>  </span>
    </div>
    <h4>Binding <span class="badge badge-important">=</span></h4>
    <div>
        <strong>get:</strong> 
    </div>
    <div class="row">
        <span class="span3"><strong>set:</strong> <input type="text" ng-model="isolatedBindingFoo"></span>
        <span class="span6 text-success"> <i> This does update the parent scope.</i> </span>
    </div>
    <h4>Expression <span class="badge badge-important">&</span></h4>
    <div class="row">
       <span class="span3 input-append">
           <input type="text" class="input-medium" ng-model="isolatedFoo">
           <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
       </span>
        <span class="span6 text-success"> <i> And this calls a function on the parent scope.</i> </span>
    </div>
    <h4>Non Isolated Attribute</h4>
    <div class="row">
       <span class="span3"> <strong>get:</strong> </span>
        <span class="span6 text-success"> <i> This reflects parent scope</i> </span>
    </div>
</div>
AngularJSGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
var app = angular.module('ngApp', [])
    .directive('myComponent', function () {
        "use strict";
        return {
            scope: {
                isolatedAttributeFoo: '@attributeFoo',
                isolatedBindingFoo: '=bindingFoo',
                isolatedExpressionFoo: '&'
            },
            link: function (scope, iElement, iAttrs) {
                scope.$parent.$watch(iAttrs.nonIsoAttribute, function (newVal, oldVal, scope) {
                    scope.nonIsoAttribute = newVal;
                }, false);
            }
        };
    });
app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.foo = 'Hello!';
    $scope.updateFoo = function (newFoo) {
        $scope.foo = newFoo;
    };
}]);

Posted on   |   In ,   |  

####Objective####

  1. Example of [$watch][0]

<!-- more --> <iframe style="margin: 20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/o3cnXm" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

MarkupGithub
1
2
3
<div>X: <input type='text' ng-model='x'/></div>
<div>Y: <input type='text' ng-model='y'/></div>
<div data-xng-watcher x='' y=''></div>

AngularJSGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var app = angular.module('ngApp', [])
    .directive('xngWatcher', function () {
        "use strict";
        return {
            template: '<span>X:, Y:</span>',
            link: function (scope, elm, iAttrs) {
                scope.$watch(function () {
                    return {x: iAttrs.x, y: iAttrs.y};
                }, function (newVal, oldVal, scope) {
                    console.log('change !');
                    scope.x = newVal.x;
                    scope.y = newVal.y;
                }, true);
            }
        };
    });
[0]:http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch

Posted on   |   In ,   |  
  1. Example of ussing directive to work with highlight.js, or any other jQuery plugin.
  2. Example of ng-transclude.
  3. Example of $interpolate. (It is different from $compile)

<!-- more --> <iframe style="margin:20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/3rtp1v" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

MarkupGithub
1
2
3
4
 
<snippet>&lt;!--[if IE]&gt;&lt;script src="/js/gaig-ui-ie.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
    &lt;link rel="stylesheet" href="/css/gaig-bootstrap.css" /&gt;
    &lt;script src="/js/gaig-ui.js"&gt;&lt;/script&gt;</snippet>

AngularJSGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var app = angular.module('ngApp', [])
    .directive('snippet', ['$timeout', '$interpolate', function ($timeout, $interpolate) {
        "use strict";
        return {
            restrict: 'E',
            template: '
',
            replace: true,
            transclude: true,
            link: function (scope, elm) {
                var tmp = $interpolate(elm.find('code').text())(scope);
                elm.find('code').html(hljs.highlightAuto(tmp).value);
            }
        };
    }]);
app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.cdnPath = "//path/to/cdn/";
    $scope.version = "1.0";
}]);