Question

我正在绑定一个范围变量，一个数组到ng-repeat div标签（基本上是一个表）。当我动态地向数组添加任何数据时，它可以工作！表格中添加了一行。

但是当我从数组中删除一个元素时，更改并没有反映在表格上。应删除一行。

以下是我正在使用的代码（Javascript）：

    $scope.myfields = [];
    $scope.addField = function () {
        $scope.myfields.push({ "name": "", "type": "", "required": "", "enum": "" });
        console.log("add: " + $scope.myfields.length);
        console.log(JSON.stringify($scope.myfields));
    }

    $scope.removeField = function (index) {
        $scope.myfields.splice(index, 1);
        console.log("remove: " + $scope.myfields.length);
        console.log(JSON.stringify($scope.myfields));
    }

EJS：请看下面的内容！

奇怪的是，在控制台日志中，它表示按预期更改为$ scope变量，只有视图（表）没有得到更新。如果我没有按＆＃34;跟踪$ index＆＃34;，添加和删除反映在表格中的两个停靠点！

任何帮助表示赞赏。谢谢！

编辑2：您要求的代码：

<div class="col-md-12">
                    <p style="text-align:center"><strong>DEFINE CUSTOM FIELDS:</strong></p>
                    <br>
                    <div style="text-align:center">
                        Click on '+' button to add custom field:
                        <div class="fa fa-plus-circle" ng-click='addField()'> </div>
                        <div class="fa fa-minus-circle" ng-click='removeField(0)'> </div>
                    </div>
                    <br>
                    <div  data-responsive-table>
                        <table  data-table>
                            <thead >
                            <tr >
                                <th  data-event='sort'>
                                Field Name
                                </th>
                                <th  data-event='sort'>
                                Type
                                </th>
                                <th data-event='sort'>
                                Is Required?
                                </th>
                                <th  data-event='sort'>
                                Enumeration
                                </th>
                            </tr>
                            </thead>
                            <tbody >
                            <tr  data-parent-row ng-repeat="um in dynamicFields track by $index">
                                <td>
                                    <input placeholder="Name" ng-model="um.name" validation="required" >
                                </td>
                                <td>
                                    <select style='height: 45px;'   ng-model="um.type" >
                                        <option value="string">string</option>
                                        <option value="boolean">boolean</option>
                                        <option value="integer">integer</option>
                                    </select>
                                </td>
                                <td>
                                    <select style='height: 45px;'   ng-model="um.required" >
                                        <option  value="true">true</option>
                                        <option value="false">false</option>
                                    </select>
                                </td>
                                <td>
                                    <input placeholder="Enum" ng-model="um.enum" validation="required" >
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

Answer 1

ng-repeat中的变量名称应为myfields而不是dynamicfields

由于在您的控制器中它是$scope.myfields，因此在您的视图中它应该是

ng-repeat="um in myfields track by $index"

Angular js范围变量（数组）更改未反映在ng-repeat中

1 个答案: