Javascript AngularJs jQuery：动态添加HTML

我试图通过列标题上的按钮将行和列动态添加到HTML表中，该按钮会弹出一条带有e angularJs ng click的警报消息

我的列和行是使用jQuery正确添加的，但是，当单击按钮时，它不会调用控件中的警报函数“hello（）”！

以下是我针对该问题的JSFIDLE链接：

HTML:

项目
好啊
某项


+划船
+纵队

JS:

函数登录控制器（$scope）{
$scope.addRow=函数（）{
$（“#mtable tbody”）.append（$（“#mtable tbody tr:last”）.clone（）；
$（'#mtable tbody tr:last:checkbox'）.attr（'checked'，false）；
$（'#mtable tbody tr:last td:first'）.html（$（'#row'）.val（））；
}
$scope.addCol=函数（）{
$（'#mtable tr'）。追加（$（“”）；
$（'#mtable thead tr>td:last'）.html（'Hello！'）；
$（'#mtable tbody tr'）.each（function（）{$（this）.children（'td:last'）.append（$（''）}）；
}  
$scope.hello=函数（）{
警惕（“你好”）；
}
}

问题在于不同的上下文、进程/执行时间。最好的方法是只使用jQuery或Angularjs

仅使用Angularjs：

<!-- rows -->
<tr ng-repeat="row in table">
    <!-- cols -->
    <td ng-repeat="col in row">
        {{ col }}
    </td>

    <td>
        <button type="button" ng-click="addCol(row)">New col</button>
    </td>
</tr>

<button type="button" ng-click="addRow()">New row</button>

• 使用对象表示表（矩阵）
• 添加行函数将向表对象追加一行
• addcol函数将在表对象的行上追加一列

初始化表对象：

$scope.table = [];

添加行函数：

$scope.addRow = function () {
    $scope.table.push([]);
}

添加列函数

$scope.addCol = function (row) {
    row.push('col value');
}

使用Angularjs呈现表格：

<!-- rows -->
<tr ng-repeat="row in table">
    <!-- cols -->
    <td ng-repeat="col in row">
        {{ col }}
    </td>

    <td>
        <button type="button" ng-click="addCol(row)">New col</button>
    </td>
</tr>

<button type="button" ng-click="addRow()">New row</button>

{{col}}
新科
新行

---

由于addCol函数需要列目标来添加新项，因此操作按钮需要位于行内。

我猜您来自JQuery world

这里有一些使用AngularJS的经验法则

您不应该同时使用AngularJS和JQuery。除非您正在创建自定义指令或组件

对于具有重复动作的任务，应使用ng repeat

请记住，JQuery基于DOM操作，而AngularJS通过controller执行视图修改。。永远记住这一点，欢迎来到这个有棱角的世界

---

看看angular.org他们有非常好的教程和免费课程

我在下面的链接和代码中找到了我想要的答案：

angular.module（'App'，[]）
.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.matrix=[[0]]；
$scope.addColumn=函数（）{
$scope.matrix.forEach（函数（行）{
行。推送（0）；
});
};
$scope.addRow=函数（）{
var columnCount=$scope.matrix[0]。长度；
var newRow=[]；
对于（变量i=0；i=0&&idx<$scope.matrix.length）{
$scope.矩阵拼接（idx，1）；
}
};
$scope.deleteColumn=函数（idx）{
if（idx>=0&&idx<$scope.matrix[0].length）{
$scope.matrix.forEach（函数（行）{
行拼接（idx，1）；
});
}
};
}]);

删除
删除
添加行
添加列
作为JSON：
My columns和rows是使用jQuery正确添加的-这根本不是“正确的”。究竟为什么要将jQuery代码放在控制器中？使用
ngRepeat
或任何其他内置角度指令。如果您使用的是angular，IMO最好使用不同的方法。不使用jQuery添加行，只需修改生成行的
ng model
（顺便说一下，您现在没有这样做），angular将更新表本身：）对于您的代码，我想知道为什么您同时使用angular和jQuery。看来你不需要这么做。当做
<!-- rows -->
<tr ng-repeat="row in table">
    <!-- cols -->
    <td ng-repeat="col in row">
        {{ col }}
    </td>

    <td>
        <button type="button" ng-click="addCol(row)">New col</button>
    </td>
</tr>

<button type="button" ng-click="addRow()">New row</button>