ASP.NET,MVC,SQL,Azure,DevOps,ANGULAR,WEB API,SSRS,WCF,C#,JQUERY TUTORIALS

How to save information on client side using Angularjs?

Today we are implementing exceptionally straightforward case of how to save object value or any information on client side using in AngularJS.There are many options to store information.

1:-LocalStorage:-

setitem:- localStorage.setItem('history',JSON.stringify(oldItems));
// olditem ==Your object value or information
getitem :-
localStorage.getItem('history');
//history is key
Remove item:-
$scope.RemoveHistory = function (item,index) {
var historyData = localStorage.getItem('history');
var parsedData = JSON.parse(historyData);
for (i = 0; i < parsedData.length; i++) {
//check condition (optional)
if (parsedData[i].UserName === item.UserName && parsedData[i].source === item.source && parsedData[i].destination === item.destination)
{
parsedData.splice(i, 1);
//Remove item using index and set again in same key "history".
localStorage["history"] = JSON.stringify(parsedData);
}
}

2:- Same like this you can use "sessionstorage" :-

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

3:- Window storage :-

window.localStorage.setItem("key", Value);

var data=window.localStorage.getItem("UserToken");

4:-Cookies storage

angular.module('cookiesExample', ['ngCookies']) .controller('ExampleController', ['$cookies', function($cookies) {

// Retrieving a cookie

var favoriteCookie = $cookies.get('myFavorite');

// Setting a cookie

$cookies.put('myFavorite', value);

}]);

Use $cookiesProvider to change the default behavior of the $cookies service.

Note :-Don't forget to add respective directive for storage option.best option is localstorae than other.

localStorage vs. sessionStorage vs. Cookies:-

As far as abilities, Cookies just permit you to store strings. sessionStorage and localStorage permit you to store JavaScript primitives yet not Objects or Arrays (it is conceivable to JSON serialize them to store them utilizing the APIs). Session stockpiling will by and large permit you to store any primitives or items upheld by your Server Side dialect/system.

2 Comments

Bikesh Srivastava Angular, AngularJs

How to implement cascading dropdownlist using angularjs?

Today we are implementing exceptionally straightforward case of Cascading Dropdowns in AngularJS.

Some of the time we have to show DropDownLists in our site page such that qualities in one DropDownList are subject to the worth chose in another DropDownList. The most widely recognized case of such a usefulness is nations and states DropDownLists where in light of a chose nation you have to populate the states DropDownList. Additionally chose State you have to populate the City DropDownList.

Basic Example of Cascading DropdownList in AngularJs:-

Step 1:-Create a HTML Page

Step 2:-Include AngularJs library to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<HTML>

<head>

<script src="angular.js"></script>
<script src="script.js"></script>

</head>

<body>

        <div> Country:

            <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"

                ng-change="GetSelectedCountry()">

                <option value=''>Select</option>

            </select>

        </div>

        <div style='height: 15px;'>

            &nbsp;</div>

        <div>

            States:<select id="state" ng-disabled="!statessource" ng-model="citiessource" ng-options="state for (state,city) in statessource"

                ng-change="GetSelectedState()"><option value=''>Select</option>

            </select>

        </div>

        <div style='height: 15px;'>

            &nbsp;</div>

        <div>

            City:<select id="city" ng-disabled="!citiessource || !statessource" ng-model="city"><option value=''>

                Select</option>

                <option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option>

            </select>

        </div>

        <div style='height: 15px;'>

            &nbsp;</div>

        <div>

            <span>Selected Country: </span>

            <label>

                {{strCountry}}</label>

        </div>

        <div style='height: 15px;'>

            &nbsp;</div>

        <div>

            <span>Selected State: </span>

            <label>

                {{strState}}</label>

        </div>

        <div style='height: 15px;'>

            &nbsp;</div>

        <div>

            <span>Selected City: </span>

            <label>

                {{city}}</label>

        </div>

    </div>

</body>

</HTML>

Step 3:-Create Controller:-script.js file

var mainApp = angular.module("mainApp", []); mainApp.controller('CountryStateCityCtnl', function($scope) {

            $scope.countries = {

                'India': {

                    'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],

                    'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],

                    'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']

},

                'USA': {

                    'Alabama': ['Montgomery', 'Birmingham'],

                    'California': ['Sacramento', 'Fremont'],

                    'Illinois': ['Springfield', 'Chicago']

},

                'Australia': {

                    'New South Wales': ['Sydney'],

                    'Victoria': ['Melbourne']

}

};

            $scope.GetSelectedCountry = function () {

                $scope.strCountry = document.getElementById("country").value;

};

            $scope.GetSelectedState = function () {

                $scope.strState = document.getElementById("state").value;

};

});

Step 4:- Run project and check final output:-

Description:-

The ngOptions ascribe can be utilized to powerfully create a rundown of <option> components for the <select> component utilizing the cluster or protest got by assessing the ngOptions understanding expression.

At the point when a thing in the <select> menu is chosen, the exhibit component or item property spoke to by the chose alternative will be bound to the model recognized by the ngModel mandate.
In this given example first we are select the country and pass the statesource, similar also select the state from the statesource and pass citysource in the ng-model see below image…