如何使用 ng-repeat 重复的 J Query 将表行附加到表得到错误 $compile not found |Angular js

Posted

技术标签:

【中文标题】如何使用 ng-repeat 重复的 J Query 将表行附加到表得到错误 $compile not found |Angular js【英文标题】：How to Append a table row with J Query repeated with ng-repeat to a Table getting error $compile not found |Angular js 【发布时间】：2018-09-08 05:56:12 【问题描述】：

我有一个<table>，用户可以在其中生成一个新的表行<tr>。我使用 j Query .prepend() 生成新的 tr，每行包含一个 <datalist> 填充有 ng-repeat，因此用户可以选择要购买的项目。我的问题是，当我尝试编译新的 <tr> 元素时出现错误 $compile is not defined。

这是我的观点：

<body ng-app="MyApp">
    <div class="container" ng-controller="sellAndSupply">
        <table id="purchasesTable">
            <thead>
                <tr>
                    <tr>
                        <td>Supplier Name</td>
                        <td><input type="text"/></td>
                    </tr>
                    <tr>
                        <td>Telephone</td>
                        <td><inpu type="text"/></td>
                    </tr> 
                    <tr>
                        <td>Location</td>
                        <td><input type="text"></td>
                    </tr>
                <tr>
                    <th class="text-center"><h4><strong>Item Name</strong></h4></th>
                    <th class="text-center"><h4><strong>Quantity</strong></h4></th>
                    <th class="text-center"><h4><strong>Item Price</strong></h4></th>
                    <th class="text-center"><h4><strong>Total Price</strong></h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" list="itemList" class="form-control">

                        <datalist id="itemList">
                            <option ng-repeat="accesso in allAccessories" value=accesso.name>
                        </datalist>
                    </td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td class="newEntityPurchase"><label>New Entity</label></td>
                </tr>
                <tr>
                    <td colspan="4">Sell</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

这是我的 JS：

var articlehtml= angular.element('<tr><td><input type="text" list="itemList" class="form-control"><datalist id="itemList"><option ng-repeat="accesso in allAccessories" value=accesso.name></datalist></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td></tr>');
var compileAppendedArticleHTML= $compile(articleHTML);
var element = compileAppendedArticleHTML($scope);

/* Generate a new entity row for Purchases table */
$(".newEntityPurchase").click(function()
    $('#purchasesTable > tbody:last-child').prepend(element);
);

【问题讨论】：

【参考方案1】：

您应该使用 Angular 而不是 jQuery 生成新行。

【讨论】：

在 &lt;tr&gt; 上使用 ng-repeat 我将在控制器中定义一个 json 范围？请问你能提供更多细节吗？或者如果你有我的代码的解决方案 是的，当你想添加新行 .ex 时，你应该在 cotroller 中创建 obj 并在 obj 中添加新行。 $scope.obj = "text1": "", "allAccessories": [], "text2": "", "text3": "", "text4": ""

以上是关于如何使用 ng-repeat 重复的 J Query 将表行附加到表得到错误 $compile not found |Angular js的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 ng-repeat 循环标记的内部内容但不重复父级

AngularJS NG-repeat：如何重复必须过滤唯一值的ng-repeat内的数据

如何在angular js中的重复中间停止ng-repeat

如何在 angular.js 中解析 ng-repeat 中的 HTML [重复]

聚合函数在页面刷新时复制 ng-repeat 中的项目。需要弄清楚如何停止重复。 Angularjs Mongodb mongoose

使用 ng-repeat 重复多个元素