ng-repeat中的角度文件输入(引导）不起作用

Angular file input(bootstrap) within ng-repeat does not work

本文关键字：引导 不起作用 输入 文件 ng-repeat      更新时间：2023-09-26

>我有一个表，我通过迭代行并显示要编辑的信息。在那里，我有一个用于上传图像的文件输入。文件输入是一个引导扩展，它提供了一个很好的界面。这是链接 ： http://plugins.krajee.com/file-input/demo

它有一个简单的用法，您可以使用输入标签中的属性来定义输入组件，例如数据显示上传，或者您可以使用jquery初始化组件，例如：

$("#photo").fileinput({showCaption: false});

这是我的表格：

<table id="table-brand" class="table" style="border-style:none">
<tr>
    <td><b>Marka Adı</b></td>
    <td><b>Bilgi</b></td>
    <td><b>Aktif</b></td>
    <td><b>Logo</b></td>
</tr>
<tr name="brand" ng-repeat="brand in selectedCustomer.brands">
    <td><input name="name" type="text" class="form-control"
           id="field-brand-name"
           style="width:150px" value="" title="Vergi No"/></td>
    <td><textarea name="bio" type="text" class="form-control"
          id="field-brand-bio"
          style="width:150px" value="" title="Vergi No"></textarea></td>
    <td><input index="0" id="photo0" name="photo" type="file" class="file"
           accept=".jpg,.jpeg,.png" style="width:120px;"
           data-show-upload="false" data-show-caption="false"
           data-show-preview="false"/></td>
</tr>
</table>

问题是当我将它与 ng-repeat 一起使用时，文件输入不起作用(绑定到它的 javascript 代码不起作用(。当我删除ng重复时，它可以工作。我想这是因为我们需要像上面一样使用 javascript 初始化这些输入，因为 angular 创建了这些元素。所以尝试了这些台词： 

$(document).ready(function() {
    $('[name="photo"]').fileinput({showCaption: false, showPreview: false, showUpload: false});
});

但它没有用。同样在不删除 ng-repeat 的情况下，如果我在">

"之外获取输入元素，它可以工作。

谢谢。

编辑：我调试了该行 

$(document).ready(function() { .. }

当代码执行停止时，Angular 尚未呈现页面，因此查询不返回任何内容，也不会执行初始值设定项。

我需要一些函数来告诉 angular 在渲染页面或 ng 重复后执行。

使用这个 

 $(document).ready(function() {
       k();
    });

var k= function { $('#photo0').fileinput({showCaption: false, showPreview: false, showUpload: false});}

使用自定义指令运行 jQuery 代码。将指令放在输入字段上，并在指令的链接函数中运行管理。

angular.module('moduleName')
    .directive('myDirective', function () {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        scope: {
            //@ reads the attribute value, = provides two-way binding, & works with functions
            title: '@'         },
        template: '<div>{{ myVal }}</div>',
        templateUrl: 'mytemplate.html',
        controller: controllerFunction, //Embed a custom controller in the directive
        link: function ($scope, element, attrs) { } //DOM manipulation
    }
});

你只需要上面的 lunk 函数，它给你指令元素

尝试在控制器上创建一个函数，用于在输入的初始化上调用 fileinput 并传递输入 id，如下所示 

<input ng-init="myCtrl.init_input_file('your_file_input')" id="your_file_input" type="file">

然后在 yout Js 上使用文件输入创建函数

$my.init_input_file = function(id){
   $timeout(function(){
      $("#"+id).fileinput();
      $('#'+id).change(function(){
           $my.models.files[id] = this.files;
      });
   });
 };
在

使用它之前，请尝试创建一个位置来分配更改时的文件输入。

我解决了 ng-repeat 的问题，超时没有时间，等待 HTML 渲染。

相关文章：