Show preview image while uploading

Here (File upload and sending data to backend using angular js)we have discussed about uploading file/image, let us check how we can show a preview image while uploading. I am not putting all file upload code here, if you are interested check here.

Preview of image while uploading

<form name="upload" class="form" ng-submit="addFile()">
  <input type="file" name="file" id="iconUplaod" multiple 
 onchange="angular.element(this).scope().uploadedFile(this)" />
 <button type="submit">Upload </button>
</form>

JS

$scope.uploadedFile = function(element) {
 $scope.$apply(function($scope) {
   $scope.files = element.files;
   //icon preview
   var fileReader = new FileReader();
   fileReader.readAsDataURL(document.getElementById("iconUplaod").files[0]);
   fileReader.onload = function (oFREvent) {
 $timeout(function(){
   $scope.iconPreviewUrl = oFREvent.target.result;
 });
   };
 });
}

You can show this preview url anywhere you want.

<img ng-src="{{iconPreviewUrl}}" alt=""/>

As mentioned above it is very straight forward, in case you want to show file name as well please check below code

Show uploaded file name

$scope.uploadedFile = function(element) {
  if(element.files.length > 1){
   $scope.iconDetails = element.files.length + 'files';
  }
  else{
   $scope.iconDetails = element.files[0].name;
  }
}

Show this where ever you want.

<p>{{iconDetails}}</p>

Related Post

1. File upload validation

2. File upload and sending data to backend using angular js

3. How to download file from backend to UI

Create time series data using JavaScript

What is time series

Time series is an array or object which usually contains date and count or date and label or any other combinations. Which will be used to plot time series charts. For example high chart, d3 charts etc. are using time series data.

Why we need a time series data

As explained above most of charts using time series data to plot clean charts. For example we have data on Jan 1 2017, Jan 10 2017 and Jan 20 2017 and some counts associated with each other. If we show this data directly in charts it won't be a nice view for the users. So we need to fill the remaining dates probably with a zero count (depends on your requirements). Especially if you are trying for a time slider graph then most of the chart required time series data.

Sample array

 [1486655240,12],[1486655241,14], [1486655245,17]

How do we create a time series data

Logic here is that fill missing date and add zero count for them.

Javascript

function createTimeSeriesData(inputdata) {
  var timeseries = [];

  if (inputdata.length == 1) {
    timeseries.push(inputdata[0]);
  }

  else {
    var maxDate = inputdata[inputdata.length - 1][0];
    var dateArray = [];
    var index = 0;
    var nextDate = 0;

    while (nextDate <= maxDate) {
      nextDate = moment(inputdata[0][0]).add(index, 'days').valueOf();
      dateArray.push(nextDate);
      index++
    }

    var _date = [];

    for (var i = 0; i < dateArray.length; i++) {
      var isTrue = false;
      for (var j = 0; j < inputdata.length; j++) {
        var _date1 = moment(inputdata[j][0]).format("MM/DD/YYYY");
        var _date2 = moment(dateArray[i]).format("MM/DD/YYYY");

        if (_date1 == _date2) {
          isTrue = true;
          _date = inputdata[j];
        }
      }
      if (isTrue) {
        timeseries.push(_date);
      }
      else {
        timeseries.push([dateArray[i], 0]);
      }
    }
  }
}

Please note I have used moment.js here for date handling.For more info https://momentjs.com

Result will be a clean charts

Related Post

1. Responsive Highchart

2. File upload validation

3. Excel like feature grid for UI

4. Customize context menu in handsontable

ng-click in angular 2

ng-click in angular 2 is different from angular js 1. Let us check how it is in angular js 1 first.

Html

<div ng-click="alertValue()">Alert Value</div>

JS

$scope.alertValue = function()
{
   alert('clicked');
}

In angular 2 it is different, see the below example for more info.

Html

Angular is making use of powerful html and css properties. Here (click) syntax is already supported by html, angular 2 is making use of that features.

<div *ngIf="selected">
  <h4>Selected</h4>
  <p>
    <strong>{{selected.name}}</strong>
  </p>
</div>

<h2>{{title}}</h2>
<div>
  <ul>
    <li *ngFor="let i of items">
      <p (click)="showSelected(i)">{{i.name}}</p>
      <p>{{i.exp}}</p>
    </li>
  </ul>
</div>

Here you can notice the syntax different.

//Angular js 1
<div ng-click="alertValue()">Alert Value</div>

//angular js 2
<p (click)="showSelected(i)">{{i.name}}</p>

JS

Let us check the ts file. Here I have used angular 2 + typescript. On click I am showing the selected values.

import {Component} from 'angular2/core'

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
})
export class sampleComponent {
    title: string;
    items: any[];
    selected:string;
    constructor() {
        this.title = "Angular 2 click";
        this.items = [{
            name:'Prashobh',
            exp:'9',
        },
        {
            name:'Abraham',
            exp:'15',
        },
        {
            name:'George',
            exp:'2',
        },
        {
            name:'John',
            exp:'20',
        }
        ]
    }
    showSelected(item){
        this.selected = item;
    }
}

Click on the name you can see it is appearing in the top of header. Here I have added *ngIf="selected" (ng-if in angular 2)without this it will throw error as the value is not ready.

It will be nice if we add a simple search functionality for this name list. For that please refer this post Angular 2(+) search using pipe.

In this article we have discussed about adding a click event in Angular 2(+).

Related Post

1. How to start with Angular js 2

2. ng-repeat in angular js 2

3. Angular 2 filter using pipe concept

Customize context menu in handsontable

Using handsontable we can create excel like grid and it allows to customize a lot. Handsontable has a default context menu but it allows developers to customize. Let us check how we can create a simple handsontable with default context menu.

View

<div id="sample"></div>

JS

var data = [
 ["", "India", "US", "China", "Russia"],
 ["2016", 10, 11, 12, 13],
 ["2017", 20, 11, 14, 13],
 ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('sample');
var hot = new Handsontable(container, {
 data: data,
 rowHeaders: true,
 colHeaders: true,
 dropdownMenu: true,
 contextMenu : true
});

If you don't want context menu simply don't add it or set it as false.

Customize context menu

Let us check with asn example how we can customize context menu.

var data = [
 ["", "India", "US", "China", "Russia"],
 ["2016", 10, 11, 12, 13],
 ["2017", 20, 11, 14, 13],
 ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('sample');
var hot = new Handsontable(container, {
 data: data,
 rowHeaders: true,
 colHeaders: true,
 dropdownMenu: true,
 contextMenu : {
  callback: function(key, options) {
 if (key === 'custom_menu1') {
  console.log(hot.getSelected());
  //your function 
 }
 if (key === 'custom_menu1') {
  console.log(hot.getSelected());
  //your function
 }
 },
 items: {
 "custom_menu1": {
  "name": "My first context menu",
 },
 "custom_menu2": {
  "name": "My second context menu",
 }
}
};
});

Suppose if we need to hide some context menu option for any particular selection, we can do that very easily. See the below code which will hide the particular option if the condition is true.

"custom_menu1": {
 "name": "Disable this selection if the condition is true",
 disabled: function() {
 //hot.getSelected()// get selected row/column info and data
 if(your_condtion){
  return true
 }
}
}

And also you can override the custom context menu option as well. Below list contains the custom context menu option provided by handsontable and you can override these also using the above example.

1. row_above

2. row_below

3. hsep1

4. col_left

5. col_right

6. hsep2

7. remove_row

8. remove_col

9. hsep3

10. undo

11. redo

12. make_read_only

13. alignment

Excel like feature grid for UI

Many plugins are available for creating grid/table. But if we want to create excel like feature for UI which plugin should we use? Yes there are some plugins available. In those I found Handsontable is much better and easy for customization. You can easily add columns and rows and has a great support for doing data validation. You can go to this link Handsontable for understanding about the features provided by Handsontable.

(This image is captured from handsontable official site)

Let us check how we can start with Hanndsontable. You can go to Handsontable plugin site and download plugin. It is pretty straight forward to start with Handsontable.

Html

<div id="sample"></div>

JS

var data = [
  ["", "India", "US", "China", "Russia"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('sample');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  dropdownMenu: true
});

You are done with your first excel like grid. What we have done is a very basic thing, you can go to handsontable site and explore more thing. However in my future posts I will be writing about customizing handsontable like customizing context menu, custom validation, clickable header options etc. If you are interested please book mark this post for future updates.

Related Posts

1. Customize context menu in handsontable

How to use filter concept in angular 2

Yes we can do the filtering in Angular 2 as well, instead of filter it is pipe concept. Pipe will take the data and convert into desired output. There are many built in pipes like date, uppercase etc. Let us check here how we can create a custom pipes.

Sample JSON

[
 {
 name:'Prashobh',
 exp:'9',
 },
 {
 name:'Abraham',
 exp:'15',
 },
 {
 name:'George',
 exp:'2',
 },
 {
 name:'John',
 exp:'20',
 }
]

Above JSON contains the list of employees and their experience. I am going to filter this data in such a way that, if the person has more than 10 years experience it should display over qualified and less than 5 as average and the remains as it is.

Let us check first how we can achieve in Angular one.

Using Angular 1

---

Filter

angular.module('yourmodule').filter('quality', function($filter)
{
 return function(value)
 {
    var input = '';
 if(value<5)
 {
    input = 'Average';
 }
 else if(value>10)
 {
    input = 'Over Qualified (Exp '+value+')';
 }
 else
 {
    input = value
 }
 return input;
 };
});

HTML

<div>
 <ul>
  <li ng-repeat="i of items">
 <p>{{i.name}}</p>
 <p>{{i.exp | quality}}</p>
  </li>
 </ul>
</div>

It is pretty straight forwards and you can see the desired output. Now let us see how it is in angular 2. Here we will be using angular 2 + typescript.

Using Angular 2

---

Component

import {Component} from 'angular2/core'

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
})
export class sampleComponent {
    title: string;
    items: any[];
    constructor() {
        this.title = "Angular 2 filter";
        this.items = [{
            name:'Prashobh',
            exp:'9',
        },
        {
            name:'Abraham',
            exp:'15',
        },
        {
            name:'George',
            exp:'2',
        },
        {
            name:'John',
            exp:'20',
        }
        ]
    }
}

Now let us create a sample pipe.

import {Pipe,PipeTransform} from 'angular2/core';
@Pipe({
    name:'quality'
})

export class QualityPipe implements PipeTransform{
    transform(value:any){
        var input = '';
        if(value<5)
            input = 'Average';
        else if(value>10)
            input = 'Over Qualified (Exp '+value+')';
       else
            input = value
        return input;
    }
}

We are done with the pipe, here Quality is the pipe name. If you add the pipe directly in view it won't work as we didn't import dependencies in our component.

Import pipe dependencies.

import {QualityPipe} from './sample-pipe';

And add pipe name inside our decorator.

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
    pipes:[QualityPipe]
})

Final component

import {Component} from 'angular2/core'
import {QualityPipe} from './sample-pipe';

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
    pipes:[QualityPipe]
})
export class sampleComponent {
    title: string;
    items: any[];
    constructor() {
        this.title = "Angular 2 filter";
        this.items = [{
            name:'Prashobh',
            exp:'9',
        },
        {
            name:'Abraham',
            exp:'15',
        },
        {
            name:'George',
            exp:'2',
        },
        {
            name:'John',
            exp:'20',
        }
        ]
    }
}

View

<h2>{{title}}</h2>

<div>
 <ul>
  <li *ngFor="let i of items">
 <p>{{i.name}}</p>
 <p>{{i.exp | quality}}</p>
  </li>
 </ul>
</div>

Run "npm start" you can see the output like below.

Related Post

1. How to start with Angular js 2

2. ng-repeat in angular js 2

ng-repeat in angular 2

Looping is very simple in Angular js 1, don't worry it is more simple in Angular js 2 as well with lot of performance improvement. Let us check first how it is in Angular 1.

JSON

$scope.data = [
 {
  name:'Prashobh',
  country:India
 },
 {
  name:'Abraham',
  country:US
 },
 {
  name:'Jhon',
  country:China
 }
]

Html

<div ng-repeat="d in data">
  <span>Name : {{ d.name }}</span>
  <span>Age : {{ d.country }}</span>
</div>

Now let us check how we can do the same using angular js 2

Typescript

export class sampleComponent {
    data: any[];
    constructor() {
        this.data = [{
               name:'Prashobh',
               country:India
             },
             {
              name:'Abraham',
              country:US
             },
             {
              name:'Jhon',
              country:China
             }
         ]
    }

I added JSON file inside the constructor itself for now, ideally it should be from service file, I am not going to explain those in this post.

Don't forget to import angular2/core in your typescript file.

import {Component} from 'angular2/core'

If you are facing any issue on setting up your angular 2 app, please check this reference How to start with Angular js 2

Html

<div *ngFor="let d of data">
  <span>Name : {{ d.name }}</span>
  <span>Age : {{ d.country }}</span>
</div>

Here * is important, without that it won’t work. Angular 2 is making use of powerful css and html properties.The let key is part of angular 2 template syntax.

Related Posts

1. How to start with Angular js 2

How to start with Angular 2

This post is outdated now

Here we will discuss about how we can create a simple app using angular js 2. So first up all the question is why angular js 2?

Angular js 1 is basically developed for google developers for their internal use and more over it is developed for UI designing purpose and later they extended many features like two way data binding etc. Now Angular js 1 is widely used by developers. Recent past some architectures and developers points about performance issues and angular core team finally come up with a new version of Angular and it is Angular js 2. Which is well structured and it offers a very good performance.

There is a lot of difference between angular one and two. Angular two is supporting JavaScript ES6 which is not yet supported by latest browsers however you can use current JavaScript ES5 with angular 2, but you may not be able to enjoy all features of angular 2 in this case.

So the best option is to use Angular two with typescript. In this case you need to compile the files before rendering into the browser as browser is not yet supporting ES6. But in coming future it should be supported and you can use angular 2 with JavaScript ES6 directly.

In this article I am going to explain how we can start a simple application using Angular 2 + Typescript. Typescript is superscript of JavaScript.

Before starting be ready with following things.

1. Visual Studio Code [ https://code.visualstudio.com/ ]
(As this editor supporting typescript so that you can enjoy coding)

2. NodeJS [ https://nodejs.org/en/download/current/ ]

Create folder structure similar like below screen shot

 

package.json

  {
  "name": "angular2_app",
  "version": "1.0.0",
  "description": "My first Angular 2",
  "main": "index.js",
  "scripts": {
    "start": "tsc && concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "lite" : "lite-server",
    "tsc": "tsc",
    "tsc:w" : "tsc -w",
    "typings" : "typings"
  },
  "keywords": [
    "angular2",
    "node",
    "typescript",
    "javascript",
    "html5"
  ],
  "dependencies": {
    "angular2": "2.0.0-beta.17",
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",
    "systemjs":"0.19.31"
  },
  "devDependencies": {
    "concurrently" : "1.0.0",
    "lite-server" : "1.3.1",
    "typescript":"1.7.3"
  },
  "author": "Prashobh",
  "license": "ISC"
}

It contains all the dependencies. The script sections details are used for typescript for compiling purpose.Once you add package.json, go to command prompt and run "npm install" or you can open the folder and do "shift + right" click you will find an option "open command window here" ,click that and type "npm install". You can add other dependencies as well (eg:bootsrtap) then you can just type "npm update". You can see a folder "node-modules" is created with all the files.

Index.html

<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--Lib includes-->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!--App includes-->
<script type="text/javascript">
  System.config({
 packages: {
  app : {
   format: 'register', 
   defaultExtension: 'js'
  }
 }
   });
 System.import('app/boot').then(
  console.log.bind(console),
  console.error.bind(console)
 );
</script>
<title>MY first angular 2 app</title>
 </head>
   <body class="container">
     <sample-list></sample-list>
    </body>
</html>

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module":"system",
        "moduleResolution":"node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude":["node_modules"]
}

Under App I am creating some files, please see the below screenshot

sample-list.html

<h2>{{title}}</h2>
<div>
 <ul>
  <li *ngFor="let i of items">
   <p>{{i.name}}</p>
   <p>{{i.des}}</p>
   <p>{{i.exp}}</p>
  </li>
 </ul>
</div>

sampleComponent.ts

sampleComponent.ts is typescript file. I added JSON file inside the constructor itself for now, ideally it should be from service file, I am not going to explain those in this post.

import {Component} from 'angular2/core'

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
})
export class sampleComponent {
    title: string;
    items: any[];
    constructor() {
        this.title = "My first Angular 2 Application";
        this.items = [{
            name:'Prashobh',
            des:'SSE',
            exp:'10',
        },
        {
            name:'Abraham',
            des:'PM',
            exp:'15',
        },
        {
            name:'Anil',
            des:'SE',
            exp:'2',
        }]
    }
}

Boot.ts

In angular 2 we need to initialize the things rather than browser taking the control.

import { bootstrap } from 'angular2/platform/browser'
import { sampleComponent } from './sampleComponent'

bootstrap(sampleComponent)
    .then(
 a => { 
  console.log('--Bootstrap success!')
  console.log('--Catalog App is ready!')                    
 },
 err => console.error(err)
);

Now open command prompt and type "npm start". You can see your first Angular 2 app.

If you are getting any error check typo mistake and also try to debug in chrome.

The above demo is a kind of hello word application just to start with angular js 2. I will be writing more about on angular js 2 and things like setting a single page application. If you are interested bookmark this page.

Related Post

1. ng-repeat in angular js 2

2. Angular 2 filter using pipe concept

3. ng-click in angular js 2

testing

This page contains some of the images which uploaded for this blog.This page is only for internal purpose, please ignore this.

 

 


 






 


 

File upload validation

I have explained here about uploading a file from UI (File upload and sending data to backend using angular js) .We can restrict user to upload only a war or zip file by checking the extension of file. Let us check with an example

function validateFile(){  
  var fileName = 'sample.zip';
  var ext = fileName.substring(fileName.lastIndexOf('.') + 1);  
  if(ext.toLowerCase() == 'war')
  {
     return true;
  }
  else
  {
     return false;
  }
}

if(validateFile())
{
  //upload
}
else
{
  //show a message 
}

Same code you can use for any extension .Let us check same code for image upload

function validateImage(){  
  var imageName = 'sampleImage.png';
  var ext = imageName.substring(imageName.lastIndexOf('.') + 1);  
  if(ext.toLowerCase() == 'png')
  {
     return true;
  }
  else
  {
     return false;
  }
}

if(validateImage())
{
  //upload
}
else
{
  //show a message 
}

Using the above validator function you can easily find out the extension of any files or images

1. File upload and sending data to backend using angular js

2. How to download file from backend to UI

3. Add and remove active class on click Angular

Conditionally add or remove class on click - Angular

Here I have explained (Add class to an active element) about adding a class on click. But if we need to remove the active class on clicking the item again. Let us check how it will work.

HTML

<ul>
 <li ng-repeat="datalist in datalists" ng-click="select(datalist)"
   ng-class="{active: isActive(datalist)}" >
 <div>{{ datalist.name }}</div> 
 </li>
</ul> 

Sample JSON

$scope.datalists = [
    { "name": "Read about angular"},
    {"name": "Read about knockout"},
    {"name": "Read about backbone"},
    {"name": "Read about jquery"},
    {"name": "Read about javascript"}
]

Controller

$scope.select= function(item) {
  $scope.selected = ($scope.selected === item ? null : item); 
};
$scope.isActive = function(item) {
  return $scope.selected === item;
};

Using this approach you can easily find out user is clicking on same item again or not and you can write you're on logic also in this scenario. See the below code for more info.

$scope.select= function(item)
{
  if(item === $scope.selected)
  {
    $scope.selected = null;
    //your logic
  }else
  {
    $scope.selected = item;
    //your logic
  }
};

Related Posts

1. Disable submit button until all mandatory fields are filled - Angular

2. Angular Loader using font awesome icons

3. Angular js add class to active element

4. Add a class for everything clicked - angular

5. Toggle click on dynamic menu items - Angular

How to download file from backend to UI

It is possible from UI with very lesser code. Please note it may change depends on how the backend code has written. Let us check some cases.

Suppose service is returning exact files, then UI just need to invoke the service API and it will download. Let us see this scenario first with a simple example.

I have used angular for explaining but you can try normal JavaScript as well.

var url = 'your service call';

$http.get( url, {cache: false} )
.success( function( data )
{
 if(success){
  window.location.href = 'your service call';
  //window.open( 'your service call');
 }
})
.error( function( data)
{
 error(data);
});

This will do the job and you may noticed I commented "window.open", yes you can use that as well for opening the download files and more over you can directly invoke the service call also if backend allows that.

var url = 'your service call'
window.location.href = url;

Here "your service call" is nothing but the backend api or method (java/.net or whatever)

If UI need to pass some tokens or any kind of security header while invoking service calls, then above method won't work. We won't be able to invoke the api directly without passing the header. Let us check how we can do in this case.

If you are interested refer this also How to set headers for $http calls in Angular

Many of you already heard about FileSaver JS, using this plugin we can easily download files from backend .You can download FileSaver JS from here https://github.com/eligrey/FileSaver.js/

var url = 'your service call';
var filename = 'myfile'
$http.get( url, {cache: false} )
.success( function( data )
{
 var blob = new Blob([data], {
  type: "application/octet-stream"
 });
 saveAs(blob, filename );
})
.error( function( data)
{
 //error
});
 

You can give any name and also you can specify the extension.

var filename = 'myfile.txt'
var filename = 'myfile.csv' 
etc..

And one important thing is the type which should be the same which you mentioned in the service files.

type: "application/octet-stream"
type: 'application/vnd.ms-excel'
etc

OK then I don't want to use any plugin for download. Let us see how we can achieve this.

var url = 'your service call';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('ticket', 'ticket_1223333');
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
  var data = xhr.response;
  var blob = new Blob([data], 
  { type: 'application/vnd.ms-excel' });
  var url = URL.createObjectURL(blob);
  window.location = url;
 }
};
xhr.send(null);
    

Here I have used relatively old code but you can always try with the same using JQuery as well

There must be many options to achieve this I just mentioned some of them.

Related Posts

1. File upload and sending data to backend using angular js.

2. Angular js client side pagination like google.

3. Angular Loader using font awesome icons

4. Angular js add class to active element

Ng-option or ng-repeat in select tag and issue with ng-options in Angular

I came across this many times which one will be better to use, ng-option or ng-repeat while dealing with select tags. Let us see first how the code looks like.

Ng-option

 $scope.items = [
 {name:'India',label:'I'},
 {name:'USA',label:'U'},
 {name:'Russia',label:'R'},
 {name:'China',label:'C'},
 {name:'Australia',label:'A'},
 {name:'Japan',label:'J'}
];

 <select ng-options="item as item.name for item in items" ng-model="selected"></select>
 

Here we have added ng-option along with select tag itself. This provides some benefits like reducing memory and increasing speed and also more flexibility to use.

Ng-repeat

This is straight forward, see the code below

<select>
  <option ng-repeat="item in items" ng-model="select">{{item.name}}</option>
</select>

Basically ng-option is far better than ng-repeat in the case of select tags but recently I faced many issues with ng-option in fir fox some versions and I forced to re write everything back to ng-repeat. One issue I faced is that if I try to select something from the select list, scroll is going top and making very annoying experience to user's .Especially this is happening when I try to select anything at the bottom of the list. This is happening only in fir fox versions.

If somebody has any suggestions on this put it in comment box so that I can update the post as well

Related Posts

1. Disable submit button until all mandatory fields are filled - Angular

2. Angular Loader using font awesome icons

3. Angular js add class to active element