Knowledge Sharing

Angular JS File Upload using ng-file-upload Lightweight Angular JS directive to upload files using input type file or drag&drop with ajax call. Support drag&drop, paste image, progress and abort. file upload progress, cancel/abort file drag and drop (html5 only) image paste form clipboard and drag and drop from browser pages (html5 only). image resize and center crop (native) and user controlled crop through ngImgCrop. See crop sample (html5 only) orientation fix for jpeg image files with exif orientation data resumable uploads: pause/resume upload (html5 only) native validation support for file type/size, image width/height/aspect ratio, video/audio duration, and ng-required with pluggable cusome sync or async validations. show thumbnail or preview of selected images/audio/videos supports CORS and direct upload of file's binary data using Upload.$http() plenty of sample server side code, available on nuget on demand flash FileAPI shim loading no extra load...

AngularJS Checkbox Select The filter   filter allows us to filter an array, and return an array containing only the matching items. This filter can only be used for arrays. In this post we will look about custom filters. Here is the implementation of custom filter, which will filter the data using array of values.It will support multiple key object with both array and single value of keys. As mentioned in angularJS API AngularJS filter Doc [1] supports multiple key filter with single value, but below custom filter will support same feature as angularJS and also supports array of values and combination of both array and single value of keys.Please find the code snippet below html: script: output: Click here to download working sample References: [1]  AngularJS Filter

AngularJS Select with ngRepeat and ngOptions HTML select element with AngularJS data-binding.  The select directive is used together with ngModel to provide data-binding between the scope and the select tag control (including setting default values). It also handles dynamic option  tag elements, which can be added using the ngRepeat or ngOptions directives. The ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage : Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string. Choosing between ngRepeat and ngOptions In many cases, ngRepeat can be used on option  tag elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits: more fl...

AngularJS Inline edit In this post, we will create a simple inline editor (in table) – clicking a button will show a text field to edit the data. We will use a controller that will initialize the models and saving the data locally. Controllers are regular JavaScript functions which are executed automatically by Angular. html: script: Click here to download working sample.

Using Angular Filter and Sort a Table In this post, we’ll be looking at a way to filter and sort our data in the table. When building Angular applications, one of the cornerstones we will use is ng-repeat . Showing data is something that we do in applications like when we show a table of users or whatever other data we need to show our users. This is a common feature that is always useful so let’s look at what we’ll be building and dive right into the code. This demo will allow us to: Show a table of data ( ng-repeat [1]) Sort by ascending or descending columns ( orderBy [2]) Filter by using a search field ( filter [3]) These three common functions in Angular let’s us implement these features in a very simple way.  We'll create a simple module with one controller where we define a few variables and the list of data we’ll show to our users. script: We have created various variables for sorting and searching, and also a list of data's to be displ...

CRUD Operation to List Using SharePoint 2013 Rest API This post will give you a complete idea about CRUD (Create, Read, Update and Delete) operation in a list of SharePoint 2013 using REST API. REST service for list was first introduced in SharePoint 2010. It was under the end point /_vti_bin/listdata.svc, and it still works in SharePoint 2013. SharePoint 2013 introduces another endpoint /_api/web/lists, and which is much more powerful than in SharePoint 2010. The main advantage of REST in SharePoint 2013 is: we can access data by using any technology that supports REST web request and Open Data Protocol (OData) syntax. That means you can do everything just making HTTP requests to the dedicated endpoints. Available HTTP methods are GET, POST, PUT, MERGE, and PATCH . READ : HTTP GET method is used for any kinds of read operation. CREATE : Any kind of create operation like list, list item, site and so on maps to the HTTP POST method. You have to specify the data in reques...

Sort DIVs alphabetically without destroying and recreating the content. Sort a bunch of div elements on my page with the click of a button. 1. Sort the element array with sort()[1]  2. Reattach (in their sorted state) with appendTo()[2] html :   script: Click here to download working sample Reference: [1]. sort() [2]. appendTo()

Simple Pagination using Angular JS and Bootstrap Creating a simple pagination using Angular JS and Bootstrap. A lightweight pagination directive that is focused on pagination & will take care of visualizing a pagination bar and enable / disable buttons correctly. html: script: Click here  to download working sample Reference:  [1]  Angular Bootstrap Typeahead

Typeahead using Angular JS and Bootstrap Creating a simple type-ahead or autocomplete using Angular JS and Bootstrap. " Typeahead is a AngularJS version of Bootstrap v2's typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input. It is very well integrated into AngularJS as it uses a subset of the select directive syntax, which is very flexible. This directive works with promises, meaning you can retrieve matches using the $http service with minimal effort. " Use   bootstrap type-ahead  into the input element.  For example: In the above example uib-typeahead is a bootstrap directive, through which we retrieve data by a http request.  The typeahead-on-select  directive is used to indicate what function has to be done while selecting on the suggested result. html: script: Click here to download working sample Reference:  [1] Angular Bootstrap Ty...