Friday 14 April 2017

Binding values in Dropdown in angular js

This is the code for binding the values into the drop down  using angular

HTML CODE:   
 <div class="form-group">

                            <label class="control-label col-md-4">State</label>
                            <div class="col-md-8">
                                <select class="form-control" ng-model="model.StateId" ng-options="item.StateId as item.StateName for item in states"> <option value="">--Select State--</option> </select>
                            </div>

                        </div>

Angular code:
 
$scope.states = [];

            $http({
                method: 'GET',
                url: 'GetStates',
            }).success(function (result) {
                $scope.states = result;
            });


.CS CODE

 public JsonResult GetStates()
        {
            ApplicationDbContext _db = new ApplicationDbContext();
            return Json(_db.States.Select(c => new { StateId = c.StateId, StateName = c.StateName }), JsonRequestBehavior.AllowGet);
        }

Code to upload the image in 64 bit in Angularjs

Code to upload the image in 64 bit in Angularjs  

Html code 
<div class="col-md-8">
                                <img ng-src="data:image/png;base64,{{model.Logo}}" id="photo-id" />
                         
                                <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)" id="photo-upload" />


                            </div>


Angular code

 $scope.uploadFile = function (input) {
           
           
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.readAsDataURL(input.files[0]);
                    reader.onload = function (e) {

                        $('#photo-id').attr('src', e.target.result);                    
                        var canvas = document.createElement("canvas");
                        var imageElement = document.createElement("img");
                                           
                        imageElement.setAttribute = $('<img>', { src: e.target.result });
                        var context = canvas.getContext("2d");
                        imageElement.setAttribute.load(function()
                        {
                            debugger;
                            canvas.width = this.width;
                            canvas.height = this.height;
                       
                       
                            context.drawImage(this, 0, 0);
                            var base64Image = canvas.toDataURL("image/png");

                            var data = base64Image.replace(/^data:image\/\w+;base64,/, "");
                       
                            $scope.model.Logo = data;
                        });
                   
                       
                   
                    }
               

                }
            }

Screen sort