CODEWITHSUNDEEP
javascripthtmlangularjs
banu prakash
banu prakash

Reputation: 3

To assign ng-model to the input type file when clicking the button

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var app = angular.module("myApp",[]);
    app.controller("myCtrl", function($scope) {
    $scope.users=[ 
     {name:'',email:'',course:'',file:''}
      ]
      $scope.value=function(){
       $scope.users=[{             
         name:'abc',
         email:'[email protected]',
         course:'angular js,css',
         file:'abc.jpg';
       }];
     }
     });
   </script>
         <div ng-app="myApp" ng-controller="myCtrl">
     <button type="button" ng-click="value()">To get values</button>
   <div ng-repeat="user in users">
     <input type="text" ng-model="user.name">
     <input typee="text" ng-model="user.email">
     <select ng-model="user.course" multiple>
       <option value="html">html </option>
       <option value="css">css</option>
       <option value="angular js">angular js</option>
     </select>
     <input type="file" ng-model="user.file">
    </div>
  </div>

I am new to the angular js I want to assign the file name to the input type file when clicking the button to get values i want to only assign value and diaplay the value of input type file and how to bind ng-model for the multiple select box

Upvotes: 0

Views: 531

Answers (1)

Ashish Kumar
Ashish Kumar

Reputation: 66

.directive("fileread", [function () {
return {
    scope: {
        fileread: "="
    },
    link: function (scope, element, attributes) {
        element.bind("change", function (changeEvent) {
            var reader = new FileReader();
            reader.onload = function (loadEvent) {
                scope.$apply(function () {
                    scope.fileread = loadEvent.target.result;
                });
            }
            reader.readAsDataURL(changeEvent.target.files[0]);
        });
    }
}

}]);

<input type="file" fileread="vm.uploadme" />

Upvotes: 0

Related Questions