Full Trust European Hosting

BLOG about Full Trust Hosting and Its Technology - Dedicated to European Windows Hosting Customer

AngularJS Hosting - HostForLIFE.eu :: How to Filtering and Sorting HTML Table Data With AngularJS?

clock May 27, 2015 08:08 by author Peter

Now, I am going to tell you about How to Filtering and Sorting HTML Table Data With AngularJS. There should be three cascading dropdowns to filter the data in the table. You should also be able to sort the table. And here is the following code:

    angular.module('tableApp', []) 
    .controller('tableCtrl', ['$scope', '$http', '$timeout',function($scope, $http)  
    {                
         $http.get('tableData/practionerData.json').success(function(data) 
         { 
             $scope.practionerData = data;                        
         } 
         ); 
         $http.get('tableData/practionerType.json').success(function(practionerdata) 
         { 
              $scope.practionerType = practionerdata;      
         }           
         );
         $http.get('tableData/practionersByType.json').success(function(practionersByType) 
         { 
               $scope.practionersByType = practionersByType;       
         }           
         );
         $http.get('tableData/OrganizationByPractioners.json').success(function(OrganizationByPractioners) 
         { 
               $scope.OrganizationByPractioners = OrganizationByPractioners;                
         }  
         ); 
      }   
    ]) 


Next step, I am going to populating the data in $scope with the JSON file. I can do it with the web service also. I can also post the scope data to the server with the web service. And here is the HTML page code:
    <!DOCTYPE html> 
    <html lang='en' ng-app='tableApp'> 
    <head>      
    <title>Table Example</title>     
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js'></script>     
        <script src='js/controller.js' type='text/javascript'></script> 
        <link href='style.css' type='text/css' rel='stylesheet' /> 
    </head>    
    <body ng-controller='tableCtrl'>   

   <div id="content">     
    <table id='practitioner_table'  > 
                       <tr> 
                <th colspan="7" style="text-align:right">         
                        <i class="fa fa-search">search  
                           <select ng-model="searchObj.practitionerType" ng-options="item.practitionerTypeID as item.practitionerTypeID for item in practitionerType"> 
                        <option value="">--Select--</option> 
                    </select> 
                              <select ng-disabled="!searchObj.practitionerType" ng-model="searchObj.practitioner_master_id" ng-options="item.practitioner_master_id as item.practitioner_name for item in practitionersByType| filter: {practitionerTypeID:searchObj.practitionerType}"> 
                        <option value="">--Select--</option> 
                    </select>        
                    <select ng-disabled="!searchObj.practitioner_master_id" ng-model="searchObj.organizationName" ng-options="item.organizationName as item.organizationName for item in OrganizationByPractitioners|filter:{practitioner_master_id:searchObj.practitioner_master_id}"> 
                        <option value="">--Select--</option> 
                    </select>        
                    </i>  
                    </th> 
               </tr>   
            <tr>          
                <th><a href="#" ng-click="predicate = 'practitionerType';reverse=!reverse">Practitioner Type</a> </th>           
                <th><a href="#" ng-click="predicate = 'practitioner_name';reverse=!reverse">Practitioner Name</a></th>  
                <th><a href="#" ng-click="predicate = 'organizationName';reverse=!reverse">Organization Name</a></th>                                      
               </tr>  
            <tr ng-repeat="practitioner in practitionerData | orderBy:predicate:reverse| filter: {practitionerType:searchObj.practitionerType,practitioner_master_id:searchObj.practitioner_master_id,organizationName:searchObj.organizationName}">           
              <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.practitionerType}}</td>            
                <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.practitioner_name}}</td>           
                <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.organizationName}}</td>                
           </tr>                      
    </table>   
    </div>     
    </body> 


Finally, I am populating the dropdown and table with scope data. Remember that the <select> tag and I am cascading the dropdowns using “filter” in “ng-options”. “ng-disabled” is used to keep the child dropdown disabled until the parent dropdown has the value.

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Make Facebook Style AutoComplete in AngularJS with ASP.NET MVC?

clock May 19, 2015 10:31 by author Peter

In this tutorial, I will explain you how to make facebook style autocomplete in AngulaJS with MVC. First step, you must include the following libraries, AngularJS and ui-bootstrap-tpls.

After that, create a new ASP.NET MVC project and then Add a Home Controller. Add a Index view. Now, write the following code to your index view:
<html ng-app="myApp">
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/ui-bootstrap-tpls.min.js"></script>
    <script src="~/Scripts/AutoCompleteDemo.js"></script>
    <link href="~/Css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div ng-controller="myCtrl" class="row-fluid">
            <form class="row-fluid">
                <div class="container-fluid">
                    Code <input type="text" ng-model="selectedCode" />
                    City <input type="text" typeahead-on-select="setcode($item)" ng-model="selected" typeahead="Cityx.CityName for Cityx in City | filter:$viewValue" />
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Now, binding typeahead directive to our input field. Make a js file and name it as AutoCompleteDemo.
Write the below code to it:
angular.module('myApp', ['ui.bootstrap'])
    .controller("myCtrl", function ($scope) {
        $scope.selected = '';
        $scope.City = [
                    { code: 'AL', CityName: 'Alabama' },
                    { code: 'ID', CityName: 'Idaho' },
                    { code: 'CA', CityName: 'California' },
                    { code: 'NV', CityName: 'Nevada' },
                    { code: 'NY', CityName: 'New York' },
                    { code: 'FL', CityName: 'Florida' },
                    { code: 'KS', CityName: 'Kansas' },
                    { code: 'OH', CityName: 'Ohio' },
                    { code: 'TX', CityName: 'Texas' },
        ];
       $scope.setcode = function (selection) {
            $scope.selectedCode = selection.code;
        };

});

In above code.
a) First Inject the dependency on ui.bootstrap module.
b) Create sample list of city with their code to see AutoComplete.

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Upload a Picture Using AngularJS with ASP.NET 5?

clock May 5, 2015 11:24 by author Peter

Today, I will show you how to upload a picture using AngularJS with ASP.NET 5. First, you must create a new project and then write the following code:

Web.config File
    <appSettings> 
       <add key="Filesize" value="50KB"/> 
       <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" /> 
    </appSettings>


Asp File
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    Try 
    Response.Clear() 
    Dim fileid As String = System.Guid.NewGuid.ToString() 
    Dim imgsize As String = ConfigurationManager.AppSettings("Filesize") 
    Dim a As String = Context.Request.Files.Get(0).ContentLength.ToString 
    Dim b As String = Math.Round(a / 1024) 
    Dim c As String = imgsize.Replace(("KB").ToString, "") 
    If Val(b) < Val(c) Then 
        Context.Request.Files.Get(0).SaveAs("D:\manish\Project\Project\upload\" & fileid & ".jpg") 
        Response.Write("True|" & fileid) 
    Else 
        Response.Write("False|Select File Less Then " + imgsize + " || Your File Size is " + b + " KB") 
    End If 
    Response.End() 
    Catch ex As ArgumentOutOfRangeException 
    MsgBox("'Select A File' Then Click On Upload Button") 
    End Try 
    End Sub 

JS File
    var myApp = angular.module('myApp', ['ui.bootstrap']); 
    //upload a file code 
    myApp.directive('fileModel', ['$parse', function($parse) { 
       return { 
            restrict: 'A', 
            link: function(scope, element, attrs) { 
                var model = $parse(attrs.fileModel); 
                var modelSetter = model.assign; 
                element.bind('change', function() { 
                    scope.$apply(function() { 
                        modelSetter(scope, element[0].files[0]); 
                    }); 
                }); 
            } 
        }; 
    }]); 
    myApp.service('fileUpload', ['$http', function($http) { 
        this.uploadFileToUrl = function(file, uploadUrl) { 
            var fd = new FormData(); 
            fd.append('file', file); 
            $http.post(uploadUrl, fd, { 
                transformRequest: angular.identity, 
                headers: { 
                    'Content-Type': undefined 
                }        
            }) 
                      .success(function(data) { 
                if (data.split("|")[0] == "True") { 
                    $("#getimg").attr('src', 'upload/' + data.split("|")[1] + '.jpg'); 
                    $("#hid").val(data.split("|")[1] + ".jpg"); 
                   var img = $("#hid").val(); 
                    if (img == "noimage.jpg") { 
                        $("#Remov").hide(); 
                    } else { 
                        $("#Remov").show(); 
                    }        
                } else if (data.split("|")[0] == "False") { 
                    alert(data.split("|")[1]); 
                    var ab = $("#hid").val(); 
                    $("#getimg").attr('src', 'upload/' + ab); 
                    var img = $("#hid").val(); 
                    if (img == "noimage.jpg") { 
                        $("#Remov").hide(); 
                    } else { 
                        $("#Remov").show(); 
                    } 
                      } 
            })                  
.error(function() { 
                if ($(myFile).val() == "") { 
                    alert("Select a file"); 
                } else { 
                    alert("Select a image file"); 
                } 
            }); 
        } 
    }]);        
    $scope.uploadFile = function() { 
        var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp']; 
        if ($(myFile).val() == "") { 
            alert("Select a file"); 
        } else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) { 
            alert("Select a image file"); 
            $(myFile).val(''); 
            $("#hid").val("noimage.jpg"); 
        } else { 
            var file = $scope.myFile; 
            var uploadUrl = "Image_Upload.aspx"; 
            fileUpload.uploadFileToUrl(file, uploadUrl); 
            $scope.myFile = ""; 
            $scope.remove = true; 
            var reader = new FileReader(); 
            reader.onload = function(e) { 
                scope.image = e.target.result; 
                scope.$apply(); 
            } 
        } 
              elem.on('change', function() { 
            reader.readAsDataURL(elem[0].files[0]); 
        }); 
        return false; 
    }; 

I hope this post wil works for you. Good luck!

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Checkout Utility Methods on AngularJS?

clock April 28, 2015 08:15 by author Peter

In this tutorial, I will tell you about how to checkout some utility methods that returns BOOLEAN values on call. In AngularJS you can find many utility method like isObject, isString, isDefined, etc to check the type of the input.

All these method has similar signature like isXxxxx(). In the following code, will show you some utility methods that are present inside the angular object.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <meta charset="utf-8">
 <title> How to Checkout Utility Methods on AngularJS? </title>
</head>
<body ng-controller="MyController" ng-cloak>
<h3>angular.isArray : {{isArray}}</h3>
<h3>angular.isDate: {{isDate}}</h3>
<h3>angular.isDefined : {{isDefined}}</h3>
<h3>angular.isElement : {{isElement}}</h3>
<h3>angular.isFunction : {{isFunction}}</h3>
<h3>angular.isNumber : {{isNumber}}</h3>
<h3>angular.isObject : {{isObject}}</h3>
<h3>angular.isString : {{isString}}</h3>
<h3>angular.isUndefined : {{isUndefined}}</h3>

<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope",
function($scope) {
var fruitList = ["Apple", "Orange"];
$scope.isArray = angular.isArray(fruitList);
$scope.isDate = angular.isDate(new Date());
$scope.isDefined = angular.isDefined(fruitList);
$scope.isElement = angular.isElement("Hello");
$scope.isFunction = angular.isFunction(new Date().getFullYear);
$scope.isNumber = angular.isNumber(5);
$scope.isObject = angular.isObject({});
$scope.isString = angular.isString("Peter");
$scope.isUndefined = angular.isUndefined(null); } ]); </script>
</body>
</html>

And here is the output from the above code:

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: AngularJS: $http

clock April 21, 2015 07:06 by author Peter

In this tutorial, I will tell you about $http in AngularJS. I am gonna show you AngularJS Basic Filters. $http is a service for reading data from web services. It will use get (service URL) method for the process. Now, write the following code:

<div ng-app="httpApp" ng-controller="httpController"> 
     <ul> 
        <li ng-repeat="det in details">{{ det.name + ', ' + det.countrycode }} 
</li> 
    </ul> 
</div>

In the below code, we've an Angular app httpApp and a controller httpController. currently we want to make our controller part, right?
    < script > 
    var app = angular.module('httpApp', []); 
    app.controller('httpController', function($scope, $http) {          $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=- 22.4&west=55.2&lang=de&username=demo") 
            .success(function(response) { 
            $scope.details = response.geonames; 
        }); 
    }); < /script> 


In the preceding code we are using the $http.get() technique of Angular. within the url part we've got given a sample web service url of geo data. you'll get these free net services here. So within the success part we tend to are returning the response of the web service. Now if you write the response.geonames within the success in the browser console as follows, you'll get the array as shown on the following code:

console.log(response.geonames); 

Once it is returned we are showing the response data to the UI using the repeat directive.
And here is the complete HTML
    <!DOCTYPE html> 
    <html 
        xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <title>Angular $http</title> 
            <style> 
             li { 
                border: 1px solid #ccc; 
                border-right: none; 
                border-left: none; 
                padding: 2px; 
                text-align: center; 
                list-style:none; 
              }  
             </style> 
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
       </head> 
        <body> 
            <div ng-app="httpApp" ng-controller="httpController"> 
                <ul> 
                    <li ng-repeat="det in details">{{ det.name + ', ' + det.countrycode }} </li> 
                </ul> 
            </div> 
           <script>  
                var app = angular.module('httpApp', []); 
                app.controller('httpController', function ($scope, $http) { 
                $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=peter") 
                .success(function (response) {  
                   $scope.details = response.geonames;  
                   console.log(response.geonames); 
                   }); 
             }); 
             </script> 
        </body> 
    </html> 


You can add the following CSS to your page.
    < style > li { 
        border: 1px solid#ccc; 
        border - right: none; 
        border - left: none; 
        padding: 2px; 
        text - align: center; 
        list - style: none; 
    } < /style>

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.



AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Show ngCloak usage with AngularJS?

clock April 17, 2015 07:42 by author Peter

In this post, I will explain you about How to Show ngCloak usage with AngularJS. AngularJS gives ngCloak directive to control the glimmering issue when application is bootstrapping. AngularJS adds the ngCloak class to the component if the application is not bootstrapped and removes this class once the application is bootstrapped and prepared. Now, write the following code:


<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-resource.min.js"></script>
<meta charset="utf-8">
<title>AngularJS ngCloak Example</title>
<style> [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } </style>
</head>
<body ng-controller="MyController" ng-cloak>
<h3>ngCloak Example</h3>
 <ol >
        <li ng-repeat="item in myData"> {{item.title}} </li>
</ol>
 </body>
<script> var myApp= angular.module("myApp",['ngResource']); myApp.controller("MyController", ["$scope", "$resource","$timeout", function($scope,$resource,$timeout){ $scope.myData =[]; var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published"); youtubeVideoService.get() .$promise.then(function(responseData) { angular.forEach(responseData.data.items, function(aSingleRow){ console.log(aSingleRow); $scope.myData.push({ "title":aSingleRow.title }); }); }); }]); </script>
</html>

I hope this tutorial helps you!

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.



About HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2016 Hosting, ASP.NET Core 2.2.1 Hosting, ASP.NET MVC 6 Hosting and SQL 2017 Hosting.


Tag cloud

Sign in