Base solution for your next web application
Open Closed

how we bind ng-repeat when we append html in boilerplate #953


User avatar
0
abu created

My script on page:

<script type="text/javascript">
    $(function () {
        $('#dropZone').filedrop({
            url: '@Url.Action("UploadFiles","ResourceUpload")',
            paramname: 'files',
            maxFiles: 5,
            dragOver: function () {
                $('#dropZone').css('background', 'green');
            },
            dragLeave: function () {
                $('#dropZone').css('background', '#d7d7d7');
            },
            drop: function () {
                $('#dropZone').css('background', '#d7d7d7');
            },
            afterAll: function () {
                $('#dropZone').html('The file(s) have been uploaded successfully!');
            },
            uploadFinished: function (i, file, response, time) {
                    
                html = ($("<div id='imageDiv"+i+"' class='col-md-5'>").append($("<div class='row'>")
               .append($("<div class='col-md-6'>")
               .append("<label style='padding: 20px 20px 20px 20px;'>File Number: "+i+"</label>"))
               .append($("<div class='col-md-6'>")))
               .append($("<div class='row'><img src='" + response + file.name + "' style='width:250px; height:250px; padding: 25px;' alt='No Image'/>"))
               .append($("<div class='row' style='margin: 20px 0px 30px 90px;'>")
                .append("<input type='checkbox' id='chk'>")));
                $('#uploadResult').append(html);
                html1 = ($("<div class='col-md-7' value='" + file.name + "'>").append($("<div class='row'>")
               .append($("<table>")
               .append($("<tr>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' value='" + file.name + "'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>")
              .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>"))
               .append($("<tr>")
               .append("<td rowspan='4'class='uploadform_td'><textarea class='uploadForm' placeholder='Description'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>")
              .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>"))
              .append($("<tr>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' placeholder='User Defined'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>"))
              .append($("<tr>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' placeholder='User Defined'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>"))
              .append($("<tr>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' placeholder='User Defined'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>"))
                 .append($("<tr>")
               .append("<td class='uploadform_td'><select id='Select1' class='col-md-6 uploadForm_select'><option>Category</option><option ng-repeat='category in  vm.categories'>{{category.catagoryName}}</option></select><select id='Select2' class='col-md-6 uploadForm_select'><option>Sub-Category</option><option ng-repeat='category in  vm.subcategories'>{{subCategory.subCatagoryName}}</option></select>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>"))
               .append($("<tr>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' placeholder='User Defined'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>")
                  .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' placeholder='User Defined'/>"))
               .append($("<tr>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' placeholder='User Defined'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>")
                  .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' placeholder='User Defined'/>"))
               .append($("<tr>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm' placeholder='User Defined'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>")
               .append("<td class='uploadform_td'><input type='textbox' class='uploadForm'placeholder='User Defined'/>")))))
                $(html1).insertAfter("#imageDiv"+i+"");
            }
        });
    });
</script>

my .js code:

(function () {
    
    var controllerId = 'resourceUploadController';
    angular.module('app').controller(controllerId, [
        '$scope', '$location', 'abp.services.vault.resource', 'abp.services.vault.subCategory', 'abp.services.vault.category',
        function ($scope, $location, resourceService, subCategoryService, categoryService) {
            var vm = this;
            var localize = abp.localization.getSource('Vault');
            vm.logininfo = {};
            $scope.subCategory = function () {
                subCategoryService.getSubCategories().success(function (data) {
                    vm.subcategories = data.subCategories;
                });
            }
            $scope.subCategory();
            $scope.category = function () {
                categoryService.getCategories().success(function (data) {
                    vm.categories = data.categories;
                });
            }
            $scope.category();
         
        }]);
})();

dropdown in the page not having any option except the static i set in append

please anyone help

Thanks in advance


1 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    As I see this question is not related to ABP. But one may help who is familiar with dropzone.