Showing posts with label Angularjs Set and Remove Cookies. Show all posts
Showing posts with label Angularjs Set and Remove Cookies. Show all posts

Angular2 ngTable Params Sorting,Filter and Pagination

Angular2 ngTable Params Sorting,Filter and Pagination


Angular2 ngTable Params Sorting,Filter and Pagination angular Table all feature include sorting pagination and filter customized filter all function include ngtable in looking very pretty and responsive table.

Angular2 ngTable Params Sorting,Filter and Pagination
Angular2 ngTable Params


GetStarted
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>

<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>

NgTable Controller
angular.module("myApp", ["ngTable"]);

app.controller('NGTableCtrl', ['$scope', '$filter', '$http', 'ngTableParams', '$resource', '$timeout', '$http', function ($scope, $filter, $http, ngTableParams, $resource, $timeout) {

    'use strict';

    var vm = this;

    $scope.loading = true;
    if ($scope.loading == true) {

        $scope.st = 'whirl standard';
    } else {
        $scope.st = '';
    }
    $http.get('../api/MaidDetails')
        .success(function (largeLoad) {
           
            var data = largeLoad;
      
            vm.data = data;

            vm.changeSelection = function (user) {
       
            };



            vm.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 1000,          // count per page
                sorting: {
                    ItemAltID: 'desc'     // initial sorting
                }
            }, {
                total: data.length, // length of data
                getData: function ($defer, params) {
                    var orderedData = params.filter() ?
                            $filter('filter')(data, params.filter()) :
                            data;
                    orderedData = params.sorting() ?
    $filter('orderBy')(orderedData, params.orderBy()) :
    orderedData;
                    vm.data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                    params.total(orderedData.length); // set total for recalc pagination
                    $defer.resolve(vm.data);;
                }
            });

            // FILTERS
            // ----------------------------------- 

            vm.tableParams2 = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                sorting: {
                    ItemAltID: 'asc',     // initial sorting
                    WorkPermitNo: 'asc',
                    NoOfTransfer: 'asc',
                    Discountinued: 'asc',
                    ItemID: 'asc'

                },
                filter: {
                    ItemAltID: '',
                    WorkPermitNo: '',
                    NoOfTransfer: '',
                    Discontinued: '',
                    ItemID: ''




                }
            }, {
                total: data.length, // length of data
                getData: function($defer, params) {
                    var orderedData = params.filter() ?
                            $filter('filter')(data, params.filter()) :
                            data;
                    orderedData = params.sorting() ?
    $filter('orderBy')(orderedData, params.orderBy()) :
    orderedData;
                    vm.data= orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                    params.total(orderedData.length); // set total for recalc pagination
                    $defer.resolve(vm.data);;
                }

            });

        })
     .error(function (error, status) {
         var type = '';
         if (status === '500') {
             type = 'Internal Server Error';
         } else {
             type = 'Page Not Found';
         }
         $scope.short = { message: error, status: status, type: type };
         // console.log($scope.short);

     })
    .finally(function () {
        $scope.loading = false;
        if ($scope.loading === false) {
            $scope.st = '';
        }
        //  $scope.st = 'whirl standard';
        //   ('.whirl standard').show();
    });

}]);


Html Page


<div ng-controller="NGTableCtrl as table" class="container-fluid">
    <div class="bs-example">

        <div id="myAlert" class="alert alert-danger" ng-show="short">
            <a ui-sref="s" class="close" data-dismiss="alert">&times;</a>
            <center><img src="{{app.sitename}}img/errorimage.jpg" /></center>

            <center> <h1>{{short.status}}-{{short.type}}</h1></center>
        </div>
    </div>
  <div class="panel panel-default {{st}}" ng-hide="short">
        <div class="panel-heading">
            <div class="panel-title">Maid Details</div>
        </div>
        <table ng-table="table.tableParams2" show-filter="true" class="table table-bordered table-striped">
            <tbody>

                <tr ng-repeat="user in $data">

                    <td data-title="'ItemAltID'" filter="{ 'ItemAltID': 'text' }" sortable="'ItemAltID'">{{user.ItemAltID}}</td>
                    <td data-title="'WorkPermitNo'" filter="{ 'WorkPermitNo': 'text' }" sortable="'WorkPermitNo'">{{user.WorkPermitNo}}</td>
                    <td data-title="'NoOfTransfer'" filter="{ 'NoOfTransfer': 'text' }" sortable="'NoOfTransfer'">{{user.NoOfTransfer}}</td>
                    <td data-title="'Discontinued'" filter="{ 'Discontinued': 'text' }" sortable="'Discontinued'">{{user.Discontinued}}</td>
                    <td data-title="'ItemID'" filter="{ 'ItemID': 'text' }" sortable="'ItemID'">{{user.ItemID}}</td>

                </tr>
                <!-- <center> <img id="mySpinner" src="img/loading.gif" ng-show="loading" /></center>-->
            </tbody>
        </table>
    </div>
    
</div>

foreach loop in angularjs

foreach loop in angularjs


Today we discussed foreach loop in angularjs  web services more then data format gives and this data different array format change used angularjs data foreach how to array get the data follow us. Angularjs set Cookies

foreach loop in angularjs
foreach loop in angularjs


Foreach syntax:
angular.forEach($scope.data, function(value, key){});

Json File:
[
   {
     "Name": "Dev2tricks",
     "Password": "developerinvention"
   },
   {
     "Name": "developerinvention",
     "Password": "Dev2tricks"
   }
]

Services.js
var app = angular.module('testModule', []);
app.controller('testController', function($scope, $http){
   $http.get('Data/info.json').then(
      function(data){
         $scope.data = data;
      }
   );
   angular.forEach($scope.data, function(value, key){
      if(value.Password == "thomasTheKing")
         console.log("username is thomas");
   });
});
I know the $scope.init = function() is causing the problem, if you check the link above everything should become clear.

Could anybody explain exactly what this code is doing?
function(genre, index) - what does the index mean?

var barsApp = angular.module('barsApp',[]);

// Create and drop in as a service factory
barsApp.factory('Venues', function(){
    // This will return the Venues object
    var Venues = {};
    // Array of objects
    Venues.list = [
        { id: 0,
            name: 'Bar One',
            genres: ['Rock','Metal','Dubstep','Electro']
        },
        { id: 1,
            name: 'Bar Two',
            genres: ['Indie','Drumstep','Dubstep','Electro']
        },
        { id: 2,
            name: 'Bar Three',
            genres: ['Rock','Metal','Thrash Metal','Heavy Metal']
        },
        { id: 3,
            name: 'Bar Four',
            genres: ['Pop','RnB','Hip Hop']
        }
    ];
    return Venues;
});
// Setup controller, provide venues model into our scope
function DevCtrl($scope, Venues){
    $scope.venue = Venues;
    $scope.availableGenres = [];
    $scope.genreFilter = null;
    
    $scope.init = function() {
        angular.forEach(Venues.list, function(genre, index){
            //Only add to the availableGenres array if it doesn't already exist
            var exists = false;
            angular.forEach($scope.availableGenres, function(avGenre, index){
                if (avGenre == genre) {
                    exists = true;
                }
            });
            if (exists === false) {
                $scope.availableGenres.push(genre);
            }
        });
    
    };

$scope.setGenreFilter = function(genre) {
        $scope.genreFilter = genre;
    };
}

View.html
<div ng-app="barsApp" ng-controller="DevCtrl" ng-init="init()">
    <ul>
        <li ng-repeat="venue in venue.list | filter:genreFilter">
        <a href="">{{venue.name}}</a></li>
        <li>total {{venue.list.length}}</li>
    </ul>
        <label>

AngularJS Display TreeView collapsed

AngularJS Display TreeView collapsed

AngularJS Display TreeView collapsed
AngularJS Display TreeView collapsed
Today I am handled this task anglarjs display treeview collapsed so i am solved this task so this task share with you and task code post this site. I hope this task your very useful.  Angularjs Xeditable

First angularjs html pages designed followed code.

View.html

<div ng-app="myApp">
  <div ng-controller="myController">

    <div>
      <input type="button" value="TREE 1" data-ng-click="treeList = treeList1" /> <input type="button" value="TREE 2" data-ng-click="treeList = treeList2" />
    </div>

    <div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; ">
      <span><b>Selected Node</b> : {{currentNode.roleName}}</span>
    </div>

    <div
      data-angular-treeview="true"
      data-tree-model="treeList"
      data-node-id="treeId"
      data-node-label="treeName"
      data-node-children="children" >
    </div>

  </div>
</div>

Controller.js

(function(){
  
  //angular module
  var myApp = angular.module('myApp', ['angularTreeview']);

  //test controller
  myApp.controller('myController', function($scope){

   //test tree model 1
    $scope.treeList1 = [
        { "roleName" : "User", "roleId" : "role1", "children" : [
          { "treeName" : "subUser1", "roleId" : "role11", "children" : [] },
          { "treeName" : "subUser2", "roleId" : "role12", "children" : [
            { "treeName" : "subUser2-1", "roleId" : "role121", "children" : [
              { "treeName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
              { "treeName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]},

        { "treeName" : "Admin", "roleId" : "role2", "children" : [] },

        { "treeName" : "Guest", "roleId" : "role3", "children" : [] }
      ];

   //test tree model 2
    $scope.treeList2 = [
        { "treeName" : "User", "roleId" : "role1", "children" : [
          { "treeName" : "subUser1", "roleId" : "role11", "collapsed" : true, "children" : [] },
          { "treeName" : "subUser2", "roleId" : "role12", "collapsed" : true, "children" : [
            { "treeName" : "subUser2-1", "roleId" : "role121", "children" : [
              { "treeName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
              { "treeName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]},

        { "roleName" : "Admin", "roleId" : "role2", "children" : [
          { "roleName" : "subAdmin1", "roleId" : "role11", "collapsed" : true, "children" : [] },
          { "roleName" : "subAdmin2", "roleId" : "role12", "children" : [
            { "roleName" : "subAdmin2-1", "roleId" : "role121", "children" : [
              { "roleName" : "subAdmin2-1-1", "roleId" : "role1211", "children" : [] },
              { "roleName" : "subAdmin2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]},

        { "treeName" : "Guest", "roleId" : "role3", "children" : [
          { "treeName" : "subGuest1", "roleId" : "role11", "children" : [] },
          { "treeName" : "subGuest2", "roleId" : "role12", "collapsed" : true, "children" : [
            { "treeName" : "subGuest2-1", "roleId" : "role121", "children" : [
              { "treeName" : "subGuest2-1-1", "roleId" : "role1211", "children" : [] },
              { "treeName" : "subGuest2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]}
      ];

      
      
    //treeList1 to treeview
    $scope.treeList = $scope.treeList1;
  
  });
  
})();


treeview.js


/*
    angular.treeview.js
*/
(function(l){l.module("angularTreeview",[]).directive("treeModel",function($compile){return{restrict:"A",link:function(a,g,c){var e=c.treeModel,h=c.nodeLabel||"label",d=c.nodeChildren||"children",k='<ul><li data-ng-repeat="node in '+e+'"><i class="collapsed" data-ng-show="node.'+d+'.length && node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="expanded" data-ng-show="node.'+d+'.length && !node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="normal" data-ng-hide="node.'+
d+'.length"></i> <span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">{{node.'+h+'}}</span><div data-ng-hide="node.collapsed" data-tree-model="node.'+d+'" data-node-id='+(c.nodeId||"id")+" data-node-label="+h+" data-node-children="+d+"></div></li></ul>";e&&e.length&&(c.angularTreeview?(a.$watch(e,function(m,b){g.empty().html($compile(k)(a))},!1),a.selectNodeHead=a.selectNodeHead||function(a,b){b.stopPropagation&&b.stopPropagation();b.preventDefault&&b.preventDefault();b.cancelBubble=
!0;b.returnValue=!1;a.collapsed=!a.collapsed},a.selectNodeLabel=a.selectNodeLabel||function(c,b){b.stopPropagation&&b.stopPropagation();b.preventDefault&&b.preventDefault();b.cancelBubble=!0;b.returnValue=!1;a.currentNode&&a.currentNode.selected&&(a.currentNode.selected=void 0);c.selected="selected";a.currentNode=c}):g.html($compile(k)(a)))}}})})(angular);

Angularjs Set and Remove Cookies

Angularjs Set and Remove Cookies


I want to store some values in cookie.  So i used angular-cookies-min script for add some values to cookies I have used this below code for save values to cookie. Notify Toaster

Angularjs Set and Remove Cookies
Angularjs Set and Remove Cookies

Set Cookie

 $cookieStore.put("mychooise", mychooise);
put(key, value, [options]);

Delete Cookie

$cookieStore.remove("mychooise");
angular.forEach($cookies, function(a, b) {
    $cookieStore.remove(k);
});
getAll()

var cookies = $cookies.getAll();
angular.forEach(cookies, function(a, b) {
    $cookies.remove(k);
});

.controller('SignoutCtrl',['$scope','$cookies',toaster,function($scope,$cookies,toaster){
    $cookies.mychooise= undefined;
});


angular.module('SignoutCtrl', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
  // Retrieving a cookie
  var favoriteCookie = $cookies.get('mychooise');
  // Setting a cookie
  $cookies.put('mychooise', 'mychooise');
}]);