Question

我试图通过使用使用ng-repeat动态创建的元素的class属性来使用jQuery自动完成小部件。到目前为止，它不适用于动态创建的元素。

到目前为止我尝试的是：

当我在静态创建的输入框中应用它时，它可以正常工作。

angularcontroller.js

$('.auto').autocomplete({       
      source: function(request, response) {
         $.ajax({
            url: "/auto",
            type: "GET",
            data: request,  // request is the value of search input
            success: function (data) {
              // console.log("data>>>"+JSON.stringify(data));
              // Map response values to fiedl label and value
               response($.map(data, function (el) {
                  return {
                     value: el.name,
                    label: el.name
                  };
                  }));
               }
            });
         }      
  })

html文件

<tr ng-repeat="rowContent in dataRows" style="text-align:center">
   <td>
     <input type="text" width="80px">
   </td>
</tr>

Answer 1

作为一般规则，所有DOM操作都应该是指令的一部分。您应该访问指令的链接功能中的元素，然后在其上设置自动完成

app.directive("myautocomplete", function(){
   return{
    restrict: 'A',
    scope: {
        suggestions: "="
    },
    link: function(scope, element, attrs){
        scope.$watch("suggestions", function(newV){
            if(newV && newV.length > 0)
            {
                $(element).autocomplete({
                    source: scope.suggestions
                });
            }
        });
    }
   };
});

＆＃34;建议＆＃34;是要传递给自动填充以显示的单词数组。

HTML

<div>
   <input type="text" myautocomplete suggestions="suggestions" /></label>
</div>

这里＆＃34; myautocomplete＆＃34;是指令名称和＆＃34;建议＆＃34;在Scope中传递，具有双向绑定。

在元素上应用Jquery小部件使用ng-repeat动态创建

1 个答案: