Fatal编程技术网
  • javascript/
  • Javascript 在angularjs中删除ng grid中的一行，它还会删除下一行中的文件

Javascript 在angularjs中删除ng grid中的一行，它还会删除下一行中的文件

javascript jquery html angularjs

Javascript 在angularjs中删除ng grid中的一行，它还会删除下一行中的文件,javascript,jquery,html,angularjs,ng-grid,Javascript,Jquery,Html,Angularjs,Ng Grid,var-app=angular.module（'myApp'，['ngGrid']）； app.controller（'merchantController'，函数（$scope，$timeout）{ $scope.people=[ {“名称”：“sd”，“地点”：“hyd”}， {“名称”：“sd”，“地点”：“hyd”}， {“名称”：“sd”，“地点”：“hyd”} ]; $scope.gridOptions={ 数据：'人'， columnDefs：[ {字段：'name'，单元格模板：

var-app=angular.module（'myApp'，['ngGrid']）；
app.controller（'merchantController'，函数（$scope，$timeout）{
$scope.people=[
{“名称”：“sd”，“地点”：“hyd”}，
{“名称”：“sd”，“地点”：“hyd”}，
{“名称”：“sd”，“地点”：“hyd”}
];
$scope.gridOptions={
数据：'人'，
columnDefs：[
{字段：'name'，单元格模板：'}，
{字段：'place'，单元格模板：'}，
{displayName:'Browse'，cellTemplate:'}，
{displayName:“删除”，cellTemplate:“删除”}
]
};
$scope.remove=函数（ind）{
var index=this.row.rowIndex；
$scope.gridOptions.selectItem（index，false）；
var form=document.forms.namedItem（“gridform”）；
form.elements[“img”+索引].value=“”；
$scope.people.splice（索引1）；
};
});

您的代码一切正常，但这是浏览器的问题，因为浏览器没有更改
输入[type=“file”]
的正确
文件属性。当文件附加到输入时，您必须声明要监视的指令，并自己更改它为文本字段。例如（工作代码）：



试验
身体{
高度：500px；
}
形式{
高度：500px；
}
.网格样式{
高度：500px；
}
输入[type='file']{
颜色：rgba（0,0,0,0）；
}
输入[type='file']：在{
内容：attr（文件名）；
利润率：0.5px；
颜色：#000；
}
var-app=angular.module（'myApp'，['ngGrid']）；
应用程序指令（'fileUpload'，函数（）{
返回{
链接：功能（范围、要素、属性）{
要素on（'变更'，功能（）{
var filename=this.files[0]。名称；
var指数=属性指数；
var row=范围.人员[索引]；
row.filename=文件名；
作用域：$apply（）；
});
}
}
});
app.controller（'merchantController'，函数（$scope，$timeout）{
$scope.people=[{“name”：“sd”，“place”：“hyd1”，文件名：'}，{“name”：“sd”，“place”：“hyd2”，文件名：'}，{“name”：“sd”，“place”：“hyd3”，文件名：'}，{“name”：“sd”，“place”：“hyd4”，文件名：'}，{“name”：“place hyd5”，文件名：''}，{“name”：“sd”，“place hyd6”，文件名：''''''}）；
$scope.gridOptions={
数据：“人”，
columnDefs：[{
字段：“名称”，
单元格模板：“”
}, {
字段：'地点'，
单元格模板：“”
}, {
displayName:“浏览”，
单元格模板：“”
}，{displayName:“删除”，cellTemplate:“删除”}]
};
$scope.remove=函数（ind）{
var index=this.row.rowIndex；
$scope.gridOptions.selectItem（index，false）；
var form=document.forms.namedItem（“gridform”）；
form.elements[“img”+索引].value=“”；
$scope.people.splice（索引1）；
};
});

当我制作一个示例文件时，它工作正常，当我再次将下一行中的文件包含在项目中时，它将被删除

<!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>