在angularjs中删除ng-grid中的一行，也会删除下一行的文件

Question

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

app.controller('merchantController',function($scope, $timeout) {
  $scope.people = [
    {"name":"sd","place":"hyd"},
    {"name":"sd","place":"hyd"},    
    {"name":"sd","place":"hyd"}
  ];

  $scope.gridOptions = {
    data:'people',
    columnDefs:[
      {field:'name', cellTemplate:'<input type="text" ng-model="row.entity.name"/>'},
      {field:'place',cellTemplate:'<input type="text" ng-model="row.entity.place"/>'},
      {displayName:'Browse',cellTemplate:'<input type="file" name="img{{row.rowIndex}}" ng-model="row.entity.filename"/>'},      
      {displayName:"Remove",cellTemplate:'<button ng-click="remove(row.rowIndex)">Remove</button>'}
    ]
  };

  $scope.remove = function(ind) {
    var index = this.row.rowIndex;
    $scope.gridOptions.selectItem(index, false);
    var form=document.forms.namedItem("gridform");
    form.elements["img"+index].value="";
    $scope.people.splice(index,1);
  };
});

<!DOCTYPE html>
<html ng-app="myApp" lang="en-US">
  <head>
    <link data-require="ng-grid@2.0.14" data-semver="2.0.14" rel="stylesheet"   href="https://cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7" data-require="angular.js@*"></script>
    <script data-require="ng-grid@2.0.14" data-semver="2.0.14" src="https://cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js">    </script>
    <script data-require="ng-grid@2.0.14" data-semver="2.0.14" src="https://cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/plugins/ng-grid-flexible-height.js"></script>
  </head>
  <body ng-controller="merchantController">
    <form name="gridform">
      <div class="gridStyle" ng-grid="gridOptions"></div>
    </form>
  </body>
</html>

我想删除相应的行，当删除按钮是clicked.The行正在被删除，但下一行的文件也被删除。

Answer 1

您的代码一切正常，但这是浏览器的问题，因为浏览器不会更改 input[type="file"] 的正确 files 属性。您必须声明指令以监视文件何时附加到输入并自行更改为文本字段。例如（工作代码）：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
<link data-require="ng-grid@2.0.14" data-semver="2.0.14" rel="stylesheet"   href="https://cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
<script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7" data-require="angular.js@*"></script>
<script data-require="ng-grid@2.0.14" data-semver="2.0.14" src="https://cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js">    </script>
    <style>
        body {
            height: 500px;
        }
        form {
            height: 500px;
        }
        .gridStyle {
            height: 500px;
        }
        input[type='file'] {
            color: rgba(0, 0, 0, 0);
        }
        input[type='file']:after {
            content: attr(filename);
            margin: 0 0 0 5px;
            color: #000;
        }
    </style>
</head>
<body ng-controller="merchantController">
   <form name="gridform">
        <div class="gridStyle" ng-grid="gridOptions"></div>
   </form>
 <script>
   var app=angular.module('myApp',['ngGrid']);
   app.directive('fileUpload', function () {
       return {
           link: function (scope, elem, attrs) {
               elem.on('change', function () {
                   var filename = this.files[0].name;
                   var index = attrs.index;
                   var row = scope.people[index];
                   row.filename = filename;
                   scope.$apply();
               });
           }
       }
   });
   app.controller('merchantController',function($scope,$timeout) {
       $scope.people = [{"name": "sd", "place": "hyd1", filename: ''}, {"name": "sd", "place": "hyd2", filename: ''}, {"name": "sd", "place": "hyd3", filename: ''}, {"name": "sd", "place": "hyd4", filename: ''}, {"name": "sd", "place": "hyd5", filename: ''}, {"name": "sd", "place": "hyd6", filename: ''}];
       $scope.gridOptions = {
           data: 'people',
           columnDefs: [{
               field: 'name',
               cellTemplate: '<input type="text" ng-model="row.entity.name"/>'
           }, {
               field: 'place',
               cellTemplate: '<input type="text" ng-model="row.entity.place"/>'
           }, {
               displayName: 'Browse',
               cellTemplate: '<input type="file" file-upload name="img{{row.rowIndex}}" index="{{row.rowIndex}}" filename={{row.entity.filename}} />'
           }, {displayName: "Remove", cellTemplate: '<button ng-click="remove(row.rowIndex)">Remove</button>'}]
       };

       $scope.remove = function (ind) {
           var index = this.row.rowIndex;
           $scope.gridOptions.selectItem(index, false);
           var form = document.forms.namedItem("gridform");
           form.elements["img" + index].value = "";
           $scope.people.splice(index, 1);
       };

   });

   </script>
</body>
</html>

在angularjs中删除ng-grid中的一行，也会删除下一行的文件

Deleting a row in ng-grid in angularjs, it also deletes the file in the next row

html

javascript

jquery

angularjs

ng-grid