Hi,
How to display upload file name on each row after clicking of add in dynamically added row
In dyanmically added rows i have 3 fields Name, Country and file
currently my requirement is that after clicking of add button need to display file name on each row
Could you please help me
@{
Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngFileUpload'])
app.controller('MyController', function ($scope, $window) {
$scope.Customers = [];
$scope.UploadFiles = function (files) {
$scope.SelectedFiles = files;
};
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
$scope.Customers.push(customer);
//Clear the TextBoxes.
$scope.Name = "";
$scope.Country = "";
};
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Name</th>
<th>Country</th>
<th></th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.Name}}</td>
<td>{{m.Country}}</td>
<td><input type="file" ngf-select="UploadFiles($files)" ng-model="m.file" /></td>
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="Name" /></td>
<td><input type="text" ng-model="Country" /></td>
<td><input type="file" ngf-select="UploadFiles($files)" ng-model="file" /></td>
<td><input type="button" ng-click="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
