Question

我有一个表，用户将在表行中输入详细信息并浏览每行中的相应图像..我在使用角度js时完成了这一点。经过努力奋斗后，我做了第一行。现在我不知道如何使用相同的概念为每一行重复这一点。请帮忙。提前致谢。下面是我的代码..

<body ng-app = "myApp">

    <table class="table">
        <thead> <th>Stu Name</th> <th>Photo</th> </thead>

        <tr>
            <td> </td>
            <td>
                <input data-my-Directive type="file" name="file" id="fileUpload" style="display: none;">
                <img id="imgUpload" width="140px" height="150px" style="border-style: dashed;    border-color: grey;">
            </td>
        </tr>

    </table>

    <script type="text/javascript">
        $("#imgUpload").click(function(){           
            $("#fileUpload").click();
        })
    </script>
   </body>

js code

var app = angular.module('myApp', []); 

app.directive('myDirective', function (httpPostFactory) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attr) {

            element.bind('change', function () 
            {
                var formData = new FormData();
                formData.append('file', element[0].files[0]);
                httpPostFactory('upload_image.php', formData, function (callback) {
                   // recieve image name to use in a ng-src 
                    console.log(callback);                    
                    $('#imgUpload').attr("src",'images/' + callback);
                });
            });

        }
    };
});

app.factory('httpPostFactory', function ($http) {
    return function (file, data, callback) {
        $http({
            url: file,
            method: "POST",
            data: data,
            headers: {'Content-Type': undefined}
        }).success(function (response) {
            callback(response);
        });
    };
});

Answer 1

您可以使用ng-repeat遍历Dom以添加多行

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope){
 $scope.tableArr = ['one','two']

})
.directive('myDirective', function (httpPostFactory) {
    return {
        restrict: 'A',
        scope: {
           myDirective : '=myDirective'
        },
        link: function (scope, element, attr) {

            element.bind('change', function () 
            {
                var formData = new FormData();
                formData.append('file', element[0].files[0]);
                httpPostFactory('upload_image.php', formData)
                .then(function(response){
                       $('#imgUpload'+scope.myDirective).attr("src",'images/' + response.data);
                }) 
            });

        }
    };
}) .factory('httpPostFactory', function ($http) {
    return function (file, data) {
        $http({
            url: file,
            method: "POST",
            data: data,
            headers: {'Content-Type': undefined}
        })
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <table class="table">
        <thead> <th>Stu Name</th> <th>Photo</th> </thead> 
        <tr ng-repeat="item in tableArr">
            <td> </td>
            <td>
                <input data-my-Directive="$index" type="file" name="file" id="fileUpload" style="display: none;">
                <img id="imgUpload{{$index}}" width="140px" height="150px" style="border-style: dashed;    border-color: grey;">
            </td>
        </tr>

    </table>
</div>

＆＃13;

以角度js上传每个行表中的文件

1 个答案: