Angular JS Local storage : Maintaining state of Multiple check boxes using local storage in Angular JS

Controller :
app.controller('checkBoxController', function ($scope, $localStorage) {
   
      if($localStorage.user_type == undefined) {
        $scope.users_type=[{name:'Vendor (90%) + ', value:'Vendor', checked: true},
                            {name:'User (90%) + ',value:'User', checked: true},
                            {name:'Mnm Analyst (90%) + ',value:'Mnm_Analyst', checked: true},
                            {name:'Industry (90%) + ',value:'Industry', checked: true}];
                           
                             $localStorage.user_type = $scope.users_type;               
      } else{
                           
            function functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
   
                for (var i = 0; i < arraytosearch.length; i++) {
               
                    if (arraytosearch[i][key] == valuetosearch) {
                      return i;
                    }
                }
                return null;
            }                       
                           
        $scope.users_type=[$localStorage.user_type[0],$localStorage.user_type[1],$localStorage.user_type[2],$localStorage.user_type[3]];
                   
      }                             
 $scope.selection=[$scope.users_type[0],$scope.users_type[1],$scope.users_type[2],$scope.users_type[3]];
            // toggle selection for a given employee by name
            $scope.toggleSelection = function toggleSelection(employeeName) {

            $localStorage.user_type = $scope.selection;   

            var idx = $('#' + employeeName).prop("checked");

            var index = functiontofindIndexByKeyValue($scope.users_type, "value", employeeName);

                // is checked
                if (idx == false) {
                 
                 $localStorage.user_type[index].checked = 'false';                 
               
                }

                // is unchecked
                else {
                   
                $localStorage.user_type[index].checked = 'true';
                }
               
      };

});



View :   Index.html
  <div class="digreeWrap" ng-controller="checkBoxController">
            <div  class="digreeChkWrap">
                <div ng-repeat="user in users_type"  class="checkbox">
                    <label>
                    <input id="{{user.value}}" type="checkbox" value="{{user.value}}"  ng-click="toggleSelection(user.value)" ng-checked="{{user.checked}}" />
                    <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                    {{user.name}}
                    </label>
                </div>
            </div>
            <div class="count">= 360 <i class="fa fa-circle-o countD"></i></div>
        </div>


Learnit launch - Free courses on Mean stack

Learnit is a on-line interactive technology learning platform with expert level instructors and consultants. Share your industrial experience with us and we will help you to resolve your technical issues.



Adding user authentication on MongoDB replica set


Stoping the MongoDB replication -
* Note : Assuming  dbe1 as primary, dbe2 as secondary, dbe3 as secondary, dbw1 as hidden
a] Go to mongo shell-
Stop the secondaries first using below commands:
 
use admin
db.shutdownServer()
b] Go to Linux shell-
sudo service mongod stop
C] Go to primary server dbe1 first and then secondaries and follow below steps:
1) Config file path : /etc/mongod.conf
     a) security :
            authorize : enabled
     b) bindIp: 127.0.0.1 (backend server's IP) 
*Note : It will allow only this provided ip to connect the MongoDB server.
     c) Restart your mongodb service
          command : sudo service mongod restart
*Note : Assuming "database1" is your database name, "user1" is your user name, "admin123" is your password
2) go to mongo shell and type below command :
   a) use database1
   b) db.createUser(
     {
        user: "user1",
        pwd: "admin123",
        roles: [ { role: "root", db: "database1" } ]
     }
    )
3) Exit from the command prompt and try connecting using below command on the mongo shell:
mongo --port 27017 -u "user1" -p "admin123" --authenticationDatabase "database1"
* Go to primary and type below command
1] rs.initiate()
2] rs.add("dbe2:27023")
3] rs.add("dbe3:27024")
4] rs.add({ "_id" : 3, "host" : "dbw1:27025", "priority" : 0, "hidden" : true })
5] rs.status()

RESTful Resources in Angular JS


1) The $http service provides a very low-level implementation that allows you to make XHR requests, and gives lot of control and flexibility. But in a majority of cases,we work with objects and object models that are encapsulated with certain properties and methods, like a customer object with the customer details, or a on-line mobile recharge.

2) Use the properties of this object, like save, update , delete etc.

The $resource allows for this very capability. Angular JS resources allow us to define object models in a descriptive manner as follows :
• The server-side URL for the resource
• The types of parameters that are commonly seen for such requests
• Some additional methods like get, save, query, remove, and
delete that encapsulate specific functionality and business logic for the
object model like recharge() for a on-line mobile recharge
• Types of responses as array or an object
• The headers

When to Use Angular Resources

Use Angular resources if your server side behaves in a RESTful manner.
For the case of a on-line mobile recharge, which we are using as an example.
1. A GET request to /customer/456/Recharge_request returns a list of recharge request for customer 467.
2. A GET request to /customer/467/Recharge_request/15 returns the recharge request with ID 15 for customer 467.
3. A POST request to /customer/467/Recharge_request with recharge request info in the POST data creates a
new credit card for customer 467.
4. A POST request to /customer/467/Recharge_request/15 with recharge request info in the POST data updates
the recharge request for customer 467 with ID 15.
5. A DELETE request to /customer/467/Recharge_request/15 deletes the recharge request with ID 15 for customer
467.


a) $resource also allows you to work with the returned objects as if they were
persisted data models, make changes, and ask them to be persisted.
The ngResource is a separate, optional module. To use it, you need to:

• Include the angular-resource.js in your script files.
• Include ngResource in your module dependency declaration: angular.module(‘myModule’, [‘ngResource’])

We cab easily create an Angular service that reflects your resource throughout
the app as follows:
myAppModule.factory('Recharge_request', ['$resource', function($resource) {
return $resource('/customer/:customerId/Recharge_request/:Recharge_requestId',
{customerId: 467, Recharge_requestId: '@id'},
{recharge: {method:'POST', params:{recharge:true}, isArray:false});
}]);
Now, whenever we ask for a Recharge request from the AngularJS injector, we get an Angular
resource, which by default gives us a few methods.




 A Recharge request resource

Resource Function Method URL Expected Return :

Recharge_request.get({id: 81})

GET /customer/467/Recharge_request/81 Single JSONRecharge_request.save({}, cRecharge_request)

POST /customer/467/Recharge_request with post data “cRecharge_request” Single JSONRecharge_request.save({id: 81}, cRecharge_request)

POST /customer/467/Recharge_request/81 with post data “cRecharge_request” Single JSONRecharge_request.query()

GET /customer/467/Recharge_request JSON ArrayRecharge_request.remove({id: 81})

DELETE /customer/467/Recharge_request/81 Single JSONRecharge_request.delete({id: 81})

DELETE /customer/467/Recharge_request/81 Single JSON