将动态图像添加到表列在angularjs中不起作用 [英] adding dynamic image to table column does not work in angularjs

问题描述

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

I'm new to angulajs and I'm trying to dynamically add image to a column when user selects it. Here is the below code and it did not work. code in .cshtml file ---

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

angularjs文件中的代码

Code in angularjs file

$scope.path = "";

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

I came across 1 example but written in jquery and this what exactly i need it. http://jsfiddle.net/dwebexperts/4FGg8/1/

谢谢

推荐答案

对于你的例子，它看起来很安静。我建议不要进入任何插件。 检查此插件

For your example, which looks quiet straight forward. I would recommend not to get into any plugin. 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 文件不支持code>

NOTE: : ng-change is not supported for type file

这篇关于将动态图像添加到表列在angularjs中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！