Our social:

Saturday

AngularJs Example

example : 1  => simple example
-----------

<input type="text" ng-model="name"/>
<div ng-bind="name"></div>

example : 2  => all area prints
-----------

<div ng-model="name" contenteditable="true"></div>
<div ng-bind="name"></div>

example : 3 => mathematics
-----------

<div>{{10 * 10 +12}}</div>

example : 4 =>  ng-init tag use
-----------

<div ng-init="name='jaydeep'">
    {{name}}<input type="text" ng-model="name"/>
    </div>


example : 5   ng-repeat   loop examples
-----------
    <div ng-init="detail=[{name:'jaydeep',age:'20',city:'rajkot'}]">
        <ul    ng-repeat="s in detail">
            <li>{{s.name}}</li>
            <li>{{s.age}}</li>
            <li>{{s.city}}</li>
        </ul>
    </div>

example : 6      controller and module with function examples
-----------

        <div ng-controller='language'>
       
            <button ng-click="success()">success</button>
            <button ng-click="warn()">warn</button>
            <button ng-click="info()">info</button>
            <button ng-click="delete()">delete</button>
            <p>my button click is : {{MyFavouritelanguage}}</p>
        </div>
   
            <script>
                var app = angular.module('demo',[]);
               
                app.controller('language', function($scope)
                {
                    $scope.MyFavouritelanguage='none';
                    $scope.success=function()
                    {
                       
                        $scope.MyFavouritelanguage = 'sucess';
                    };
                    $scope.warn=function()
                    {
                       
                        $scope.MyFavouritelanguage= 'warn';
                    };
                    $scope.info=function()
                    {
               
                        $scope.MyFavouritelanguage = 'info';
                    };
                    $scope.delete=function()
                    {
                           
                        $scope.MyFavouritelanguage = 'delete';
                    };
                 });
            </script>


example : 7      filter examples
-----------

    <input type="text" ng-model="price"/>
        <br/>
        welcome
       
        Currency : -  {{ price | currency:"Rs. "}} <br/>
        uppercase : -  {{ price | uppercase}} <br/>
        lowercase : -  {{ price | lowercase}} <br/>
        Currency only : -  {{ price | currency}} <br/>
        Currency points : -  {{ price |currency:"Rs.":5 }} <br/>
        number : -  {{ price | number:5}} <br/>
        Currency : -  {{ price | currency:"Rs. "}} <br/>

example : 8     header footer include examples
-----------

        <div ng-include="'extra.html'">
example : 9        textbox updated examples
-----------
        <div ng-controller='counter'>
        <input type="text" ng-model="nm"/>
            <br/>You updated textbox : {{counter}} times.
           
        </div>   
           
            <script>
       
            var app=angular.module('con',[]);
           
            app.controller('counter', function ($scope){
           
                $scope.counter = '0';
                $scope.$watch('nm',function(newValue,oldValue){
               
                    console.log(newValue);
                console.log(oldValue);
               
                    $scope.counter++;
                    if($scope.counter==100)
                    {
                        alert('congo');
                    }
                       
                });
            });
            </script>
               
           
    </body>



example : 10
-----------


<div ng-controller='counter'>
   
                    <li ng-repeat='i in myRange'>
                    {{i}} <br/>
                   
                    </li>
        </div>   
           
            <script>
       
            var app=angular.module('con',[]);
           
            app.controller('counter', function ($scope){
           
                var range=10 , i;
                var myRange=[];
                for(i=0; i < range; i++)
                {
                    myRange.push(i);
                }
           
                    $scope.myRange=myRange;
           
            });
            </script>



example : 11
-----------

<div ng-controller='counter'>
   
                    <li ng-repeat="i in myRange track by $index">
                    kingpatel9985689898<br/>
                   
                    </li>
        </div>   
            <script>
       
                var app=angular.module('con',[]);
           
            app.controller('counter', function ($scope){
           
       
                    var range= new Array(100);
           
                    $scope.myRange=range;
           
            });
            </script>

0 comments:

Post a Comment