在角度重复html代码onpush of button

时间:2016-05-11 09:13:08

标签: angularjs

我现在有一个简单的ng-click按钮,用于添加行和数字的行。

我想要的是添加一段新代码:

<div class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file)">Upload Attachment</div>
<p style="display:inline-block;" ng-if="filenameinv">Uploaded file</p>
<button type="button" ng-click="deleteAtt(file)" class="btn btn-danger btn-sm">
    <i class="fa fa-trash-o"></i>
</button>
<button type="button" ng-click="addAtt()" class="btn btn-info btn-sm">
    <i class="fa fa-plus"></i>
</button>

继承我控制器中的内容

$scope.rows = ['Row 1', 'Row 2'];

$scope.counter = 3;

$scope.addAtt = function() {

    $scope.rows.push('Row ' + $scope.counter);
    $scope.counter++;
};

我想调整控制器代码,使其能够复制上面最多5个项目的代码。理想情况下,在每个新项目上,前一个加号按钮都会消失,因此总会只有一个按钮。

目前基本上有一个上传按钮。使用上传文件时显示的删除和加号按钮。我想要的是当用户想要上传另一个文件时,用户可以点击加号按钮,然后会出现另一个上传者。我还需要对数据库进行这种保存,但那是另一个令人头痛的问题!

继承人上传者

  $scope.uploadinv = function (file) {
        if (file) {
            Upload.upload({
                url: '',
                data: {file: file}
            }).then(function (resp) {
                sweetAlert({title: "Attachment Saved", type: "success"});
            }, function (resp) {
                sweetAlert({title: "Attachment Not Saved", type: "error"});
            }, function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
                $scope.event.filenameinv = evt.config.data.file.name
            });
        }
    };

这是我到目前为止所做的一切

$scope.fileUploadRows = [];
    var fileDetails = {
      fileName: $scope.event.filenameinv
    }

    $scope.fileUploadRows.push(fileDetails);

    $scope.counter = 1;

    $scope.addInvAttachment = function() {
      var fileDetails = {
        fileName: $scope.event.filenameinv
      }
      $scope.fileUploadRows.push(fileDetails);
      $scope.counter++;
    }

1 个答案:

答案 0 :(得分:0)

可能会有所帮助:

<div class="row" ng-repeat="row in rows track by $index">
    <div class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file)">Upload Attachment</div>
    <p style="display:inline-block;" ng-if="fileUploadRows[$index].filename">Uploaded file</p>
    <button type="button" ng-click="deleteAtt(file)" class="btn btn-danger btn-sm">
        <i class="fa fa-trash-o"></i>
    </button>
    <button type="button" ng-if="$last" ng-click="addAtt()" class="btn btn-info btn-sm">
        <i class="fa fa-plus"></i>
    </button>
</div>

请注意,您可能应该以某种方式处理(数组)filenameinv。您没有在代码中显示如何使用/初始化此变量。

编辑:请参阅上面的更新标记。诀窍是拥有适当的$ index。我认为你也应该调用addInvAttachment()函数,可能是在上传的成功then中。