将动态图像添加到表列在angularjs中不起作用

发布时间：2020-12-17 17:11:14 所属栏目：安全来源：网络整理

导读：我是angulajs的新手,我正试图在用户选择时动态地将图像添加到列中. 这是下面的代码,它不起作用. .cshtml文件中的代码— table tr td img ng-src="{{path}}" / input type="file" ng-model="path" / /td /tr/table angularjs文件中的代码 $scope.path = "";

我是angulajs的新手,我正试图在用户选择时动态地将图像添加到列中.
这是下面的代码,它不起作用.
.cshtml文件中的代码—

<table>
        <tr>
            <td>
                <img ng-src="{{path}}" />
                <input type="file" ng-model="path" />
            </td>
        </tr>
</table>

angularjs文件中的代码

$scope.path = "";

我遇到了一个例子,但用jquery编写,这正是我需要的.
http://jsfiddle.net/dwebexperts/4FGg8/1/

谢谢

解决方法

对于你的例子,它看起来很安静.我建议不要插入任何插件. Check this plukr

$scope.imageUpload = function(event){
   var files = event.target.files; 
   var reader = new FileReader();
   reader.onload = $scope.imageIsLoaded; 
   reader.readAsDataURL(files[0]);
  }

  $scope.imageIsLoaded = function(e){
   $scope.$apply(function() {
      $scope.path = e.target.result;
   });
  }

并在你的HTML中

<input type="file" ng-model="path" onchange="angular.element(this).scope().imageUpload(event)"/>

注意：类型文件不支持ng-change

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!