Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

ng-options in Angular JS

Posted in Angular JS

ng-

Angular JS provides ng-options directive to bind HTML to select dropdown with options. With ng-options use ng-model to store selected options in dropdown. Here is an example. Angular controller has collection of authors scope variable.

var myApp = angular.module('myApp');
myApp.controller('myCtrl', ['$scope', function($scope){
      $scope.authors=[
                {
                    id:0,
                    name:"John Daniel",
                    age:"34",
                    books:[
                        {
                                 name:"Fundamentals of Chemistry",
                                 publishedDate:"07-23-2014"
                        },{
                                 name:"Train Your Brain",
                                 publishedDate:"7-03-2016"
                        },
                        {
                                name:"Business Economics",
                                publishedDate:"12-12-2015"
                        }
                    ]
                
                },{
                        id:1,
                        name:"David Manthon",
                        age:"57",
                        books:[
                            {
                                name:"Principles of Algebra",
                                publishedDate:"11-01-2013"
                            },{
                                name:"Think and Grow",
                                publishedDate:"09-12-2015"
                            },{
                                name:"Finance and Marketing",
                                publishedDate:"11-13-2012"
                            },
                            {
                                name:"The Art Of War",
                                publishedDate:"06-05-2011"
                            }
                    ]

                },{
                        id:2,
                        name:"Melisa Bosch",
                        age:"39",
                        books:[
                            {
                                name:"Java for Beginners",
                                publishedDate:"10-10-2012"
                            },
                            {
                                name:"Stay Hungry Stay Foolish",
                                publishedDate:"08-11-2012"
                            }
                      ]
                },
                {
                        id:3,
                        name:"Simeck Volja",
                        age:"42",
                        books:[
                            {
                                name:"Pro C Programming",
                                publishedDate:"01-02-2015"
                            },
                            {
                                name:"You Can Win",
                                publishedDate:"11-20-2013"
                            }
                    ]
                }
          ]
}]);

HTML Template:

<body ng-app="myApp">
    <div ng-controller="myCtrl">
<h2>Authors</h2>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="author in authors" > {{author.name}}
      <br/>
      <strong>Books:</strong>
      <select class="form-control" ng-model="author.selectedbook" ng-options="book.name for book in author.books" >
        <option value="">--Select--</option>
      </select>
      <strong>Selected Book:</strong>{{author.selectedbook.name}}
    </li>
    
  </ul>

   </div>
</body>

We will use ng-repeat directive to iterate all objects in authors’s collection & then loop through each book object in books array of each author.

Use list-group bootstrap class to the li tag to display a visually formatted list. Here, we are iterating through each author object & displaying each author name using {{author.name}} angular expression tag. Each book in books array is bind to every option of select dropdown.

ng-model: we have used author.selectedbook as ng-model here to store selected book. By doing this there is one more property called selectedbook created in each author object and the same is available in controller’s scope.

When we select any book of particular author the value of select dropdown is bind to the author.selectedbook & we can access name property of each book like this author.selectedbook.name.

Refer fig. below.

angular-ng-options

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Get URL parameters using JavaScript

Posted in Javascript, javascript interview questions

Sometimes you might need to get URL parameters also called as query string parameters using JavaScript. URL parameters can be one or multiple.

Example:

http://localhost/mypage?id=10

Multiple URL parameters:

http://localhost/mypage?id=10&name=Simy

Use script below to get URL parameters:


function getURLParameter(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

Above function returns specified URL parameter based on the argument supplied to that function.

getURLParameter(“id”) –> Returns 10

getURLParameter(“name”) –> Returns Simy

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Custom select dropdown using CSS

Posted in CSS

We can create customize default HTML select dropdown using CSS. We can either customize this using JS. Refer Create Custom Dropdown using jQuery article to create custom dropdown using JavaScript.

Use CSS below:

<style>
	
  select.custom-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    /* border: 0 !important; */
    /* background-color: #0d98e8; */
    color: #333;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 14px;
    padding: 10px;
    width: 245px;
    cursor: pointer;
    background: url(drop-down-arrow.png) no-repeat right center;
    background-size: 40px 37px;
    border: 1px solid #CCC;
    background-position: 206px 0;

 }
  select::-ms-expand {
    display: none;
 }
</style>

Use above CSS to customize select dropdown. This CSS is compatible with all browsers including IE 10+, FF, Chrome and MAC Safari.

Download Code

Demo:

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Search object in an array

Posted in Javascript, JQuery

You can find any element in an array based on index of that element. But what if you want to find an object in an array of objects based on any of the property. You can use filter function of JQuery.

JQuery filter (selection) function returns an element or array of elements that matches specified criteria. If provided selection parameter matches with any of the element in an array it returns that particular element or array of elements.

Example:

  $(selector).filter (selection, function(index){
       // Process elements here
  })
    Selector is a set of DOM elements or array of objects.
    Selection is a filter parameter which is used to match with the elements in array.
    function(index) is a callback function which used to process the elements in filtered array.

Example:

Consider an example of employee’s data. Find list of employee’s based on their age.

    var employees=[
        {name:"George", age:32, retiredate:"March 12, 2014"},
        {name:"Edward", age:17, retiredate:"June 2, 2023"},
        {name:"Christine", age:58, retiredate:"December 20, 2036"},
        {name:"Sarah", age:62, retiredate:"April 30, 2020"}
   ];

   var age=32;
   var employeesFound = employees.filter(function(obj) {
    return obj.age== age;
   });

In above case, employeesFound array contains an employee object with an age of 32. You can find employees with age greater than 32.

    var employeesFound = employees.filter(function( obj) {
     return obj.age> age;
    });

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

HTML5 sessionStorage Safari “QUOTA_EXCEEDED_ERR”

Posted in Html, Javascript

If you have opened a web page in private mode in ios-safari browser and if you are using sessionStorage/localStorage in your code sometimes you will get “QUOTA_EXCEEDED_ERR:”.

Error is highlighted below:

“QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.”

This can be overcome by simply putting sessionStorage code in try catch block.

              if (typeof sessionStorage === 'object') {
		    try {
		        sessionStorage.setItem('sessionStorage', 1);
		        sessionStorage.removeItem('sessionStorage');
		        sessionStorage.setItem("questions", JSON.stringify(data));
		    } catch (e) {
		        Storage.prototype._setItem = Storage.prototype.setItem;
		        Storage.prototype.setItem = function() {};
		    }
		} 

The same code is applicable for localStorage also.

              if (typeof localStorage === 'object') {
		    try {
		        localStorage.setItem('localStorage', 1);
		        localStorage.removeItem('localStorage');
		        localStorage.setItem("questions", JSON.stringify(data));
		    } catch (e) {
		        Storage.prototype._setItem = Storage.prototype.setItem;
		        Storage.prototype.setItem = function() {};
		    }
		}