我如何使用angularjs將一個輸入值綁定或復制到另一個輸入？

Question

• 大家好，我在以AngularJS為前端的Web門戶中使用MEAN堆棧，

• 在我的門戶網站中，我想上傳用戶個人資料圖像，因此我已經使用uplodcare平台在我的門戶網站中上傳了圖像。

• 我的笨蛋

• 選擇Image之后，我們在upload input獲得了該圖像的url，然后我們需要將這些url值綁定或復制到下面的輸入中以存儲在后端中。 因此我們試圖獲得無法正常工作的解決方案，例如ng-bind="userimg=img" value="{{img}}" 。 請檢查並更新我們，謝謝。

我的代碼：-

<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

當您使用angularJS 1版本時，我有一個針對您問題的臨時解決方案

   <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> 

並在控制器中

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

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

單擊“設置”按鈕，您將獲得該值。 當您使用此庫https://ucarecdn.com/libs/widget/3.3.0/uploadcare.full.min.js時，我可以提供此臨時解決方案

如果您使用任何版本的angularJs 1，請使用angular-uploadcare庫

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

如果您使用的是Angle 2或更高版本，請使用ngx-uploadcare-widget https://github.com/uploadcare/ngx-uploadcare-widget

Answer 2

您只需要在<label for="quantity">的文本字段中顯示img變量。

在ts文件中聲明一個變量img

 img; 

在html文件中

<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>