*This is a form in razor / mvc5 project*
*Summery:* I'm trying to make multiple "sub-forms" that can be added to the
form and they all have an file upload script with them.
Problem is, as far I can notice that the cloned part of angular DOM is not
initializing/compiling. Just a heads up - I'm still new to angularjs so I
tried a lot of reading a googling before I posted.
*OrderForm.cshtml* Part that im cloning is a form table .form-group and
.multiple-form-group :
<div class="row">
<div class="col-xs-12" >
<div class="form-group multiple-form-group" data-max=99>
*<div class="form-group input-group"> <!-- part of code here I'm trying to
clone -->*
* <table class="inputtable" >*
* <tr>*
* <td id="tableId0" width="0%">*
* ... *
* </td>*
* <td width="14%">*
* ...*
* </td>*
* ......*
* </tr>*
* <tr class="dropdown-menu" id="uploadTableMain"
name="0" style="width:100%;">*
* <td id="uploadPlaceHolder" width="100%"
ng-include="'/Content/Order/_Upload.html'"></td> <!-- i tred to call this
part again when it gets cloned, usually just the rendered part is cloned
(_Upload.html) and the upload buttons are not working -->*
* </tr>*
* </table>*
* <span class="input-group-btn">*
* <button type="button" id="addNewSubOrderBtn" name="0"
class="btn btn-default btn-add">+</button>*
* </span>*
*<!-- up to here -->*
* </div> *
</div>
</div>
</div>
*_Upload.html *
<div class="container" ng-controller="FileUploadCtrl">
<div class="container row">
<div class="col-xs-2 fileupload-buttonbar">
<div class="col-lg-push-2 btn-group-vertical">
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<input type="file" name="file"
data-url="FileContents/Upload"
multiple upload><span>Add files...</span>
</span>
<span type="submit" class="btn btn-primary"
ng-click="upload()">
<i class="glyphicon glyphicon-upload"></i>
Upload
</span>
<span class="btn btn-warning" ng-click="remove()">
<i class="glyphicon glyphicon-remove"></i>Remove All
</span>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<div class="col-xs-10">
<span ng-if="!files.length">No files selected</span>
<table>
<tr ng-repeat="file in files">
<td width="40%">{{file}}</td>
<td width="10%">{{file.size}}</td>
<td width="50%">
<div class="progress" ng-show="percentage">
<div class="bar" style="width:
{{percentage}}%;"></div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
*appscript.js* (part that is cloning when the )
$(function () {
var addFormGroup = function (event) {
$("#uploadTableMain.dropdown-menu").each(function (i, obj) {
$(obj).removeClass('open');
$(obj).hide();
});
event.preventDefault();
var $formGroup =
angular.element($(this).closest('.form-group'));
var $multipleFormGroup =
angular.element($formGroup.closest('.multiple-form-group'));
var $formGroupClone = angular.element($formGroup).clone();
$(this)
.toggleClass('btn-default btn-add btn-danger btn-remove')
.html('–');
$(this).attr("style", "display: inline-block;");
$formGroupClone.find('input').val('');
$formGroupClone.insertAfter($formGroup);
//$formGroupClone.find('button#addNewSubOrderBtn.btn.btn-default.btn-add').attr("style",
"display: inline-block;");
var $lastFormGroupLast =
$multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <=
countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
$formGroupClone.find('#id').val(NewGuid());
$formGroupClone.find('div.btn-group.fullwidth:last').remove();
$formGroupClone.find('.multiselect').multiselect({
numberDisplayed: 1,
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
filterPlaceholder: 'Søg...',
nonSelectedText: 'Vælg produkt',
nSelectedText: 'valgt'
});
//var upl123 = $formGroupClone.find('#uploadPlaceHolder');
//upl123.html();//("<ng-include
src=\"'/Content/Order/_Upload.html'\">"));
//var injector = angular.injector(['ng']);
//"$compile", function ($compile) {
// var scope = angular.element(upl123).scope();
// $compile(upl123)(scope);
//}
//]);
//upl123.html("<ng-include
src=\"'/Content/Order/_Upload.html'\" ></ng-include>")
$('.datetimepicker').datetimepicker({
format: 'DD.MM.YYYY. HH:mm',
});
$('[id^="tableId"]').each(function (i, obj) {
$(obj).attr("id", "tableId" + i);
});
$('[name^="uplBtnTo"]').each(function (i, obj) {
$(obj).attr("id", i);
});
$('tr#uploadTableMain.dropdown-menu').each(function (i, obj) {
$(obj).attr("name", i);
});
$('[id^="productType"]').each(function (i, obj) {
$(obj).attr("name", "ProductType" + i);
});
$('[id^="addNewSubOrderBtn"]').each(function (i, obj) {
$(obj).attr("name", i);
});
};
*app.js *(angularjs script) - that is actually a file upload script
(function () {
'use strict';
var app = angular.module('app', []);
app.controller('FileUploadCtrl',
['$scope', '$rootScope', 'uploadManager',
function ($scope, $rootScope, uploadManager) {
$scope.files = [];
$scope.percentage = 0;
$scope.dotheshow = true;
$scope.upload = function () {
uploadManager.upload();
$scope.files = [];
};
$scope.remove = function () {
$scope.files = [];
};
$rootScope.$on('fileAdded', function (e, call) {
$scope.files.push(call);
$scope.$apply();
});
$rootScope.$on('uploadProgress', function (e, call) {
$scope.percentage = call;
$scope.$apply();
});
}]);
app.factory('uploadManager', function ($rootScope) {
var _files = [];
return {
add: function (file) {
_files.push(file);
$rootScope.$broadcast('fileAdded', file.files[0].name);
},
clear: function () {
_files = [];
},
files: function () {
var fileNames = [];
$.each(_files, function (index, file) {
fileNames.push(file.files[0].name);
});
return fileNames;
},
upload: function () {
$.each(_files, function (index, file) {
file.submit();
});
this.clear();
},
setProgress: function (percentage) {
$rootScope.$broadcast('uploadProgress', percentage);
}
};
});
app.directive('upload', ['uploadManager', function
factory(uploadManager) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$(element).fileupload({
dataType: 'text',
add: function (e, data) {
uploadManager.add(data);
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total *
100, 10);
uploadManager.setProgress(progress);
},
done: function (e, data) {
uploadManager.setProgress(0);
}
});
}
};
}]);
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
