How can i Bind or copy one input value into another input using of angularjs?

Question

• Hi all i am using MEAN stack in my Web portal with AngularJS as my front-end,

• In my portal i want to upload user profile image, so i have used uplodcareplatform to upload the images in my portal.

• My Plunker

• after chooses the Image we get that image url in upload input, then we need to Bind or copy these url value into below input to store in a backend. so we tried to get the solution like ng-bind="userimg=img" value="{{img}}" which is not working. please check and update us thanks.

My Code :-

<div>
    <label >Upload Img</label>
  <input ng-model="img" role="uploadcare-uploader" name="content" data-public-key="240426036fd9daf2d723" data-images-only />

</div>

<div>
    <label for="quantity">Fetch above input value in this input</label>
    <input type="text" ng-model="userimg" ng-bind="userimg=img" value="{{img}}">

</div> 

Answer 1

I have one temporary solution for your question as you are using angularJS 1 version

   <div>
      <label >Upload Img</label>
      <input id="fileId" role="uploadcare-uploader" name="content" data-public- 
       key="240426036fd9daf2d723" data-images-only />  
   </div>
   <div>
     <label for="quantity">Fetch above input value in this input</label>
     <input type="text" ng-model="userimg">         
     <input type="submit" value="Set">
   </div> 

and in controller

$scope.userimg = null;
$(':submit').on('click', function() {
  var input = $('#fileId');

  $scope.userimg = input[0].value;
  $scope.$apply();
})

On click of set button, you will get the value. As you are using this library https://ucarecdn.com/libs/widget/3.3.0/uploadcare.full.min.js I can give this temporary solution

if you are using angularJs 1 any version then use angular-uploadcare library

https://github.com/uploadcare/angular-uploadcare

and if you are using angular 2 or above version then use ngx-uploadcare-widget https://github.com/uploadcare/ngx-uploadcare-widget

Answer 2

You just have to display the img variable in the text field for <label for="quantity">.

In ts file declare a variable img

 img; 

In html file

<div>
     <label >Upload Img</label>
      <input [(ngModel)]="img" role="uploadcare-uploader" name="content" data-public-key="240426036fd9daf2d723" data-images-only />

    </div>

    <div>
        <label for="quantity">Fetch above input value in this input</label>
        <input type="text" [(ngModel)]="img" value="{{img}}">

    </div>