ng-if 内部 ng-repeat 不从控制器更新

Question

所以我是 Angular 的新手，就像刚开始一样，所以请多多包涵……我想循环遍历一个数组，然后在循环内评估一个条件以显示一些 HTML，它看起来像这样：

<div ng-controller="BuilderController">
<div ng-repeat="row in formRows" class="fe-form-row">
    <div class="fe-form-draggable-item">
        <div class="fe-form-l-side-menu bg-primary col-md-1 pull-left">
            <i class="fa fa-cog"></i>
            <i class="fa fa-close"></i>
        </div>
        <div class="gray-lighter col-md-11 pull-left">
            <div ng-if="row.columns.length == 0">
                <div ng-click="open('lg','layout')" id="fe-form-container-base" class="fe-form-r-side-menu gray-lighter col-md-12">
                    <div class="fe-form-insert-menu">
                        <i class="fa fa-plus-square-o"></i>
                        <span>Add Column(s)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

第一次 arround 列是一个空数组，因此它的计算结果为 true 并显示 HTML 片段，一切都很好。我尝试将其设置为非空数组并评估为 false 并且不显示 HTML。到目前为止，一切都很好。问题是当我更改控制器内列的值时：

admin_app.controller('BuilderController', function ($scope, $modal, $log) {
    //default value, empty row
    //TODO: assign value to these and the form should be automatically created
    $scope.formRows = [
        {
            'layout': 'empty',
            columns: []
        }
    ];
    $scope.animationsEnabled = true;
    //TODO: these should be loaded from server-side somehow...
    $scope.columnsOptions = ['1', '2', '3', '4', '5', '6'];

    $scope.open = function (size, content) {
        var modalInstance = $modal.open({
            animation: $scope.animationsEnabled,
            templateUrl: 'fe-form-' + content + '-container.html',
            controller: 'ModalInstanceCtrl',
            windowClass: 'fe-form-builder',
            size: size,
            resolve: {
                columnsOptions: function () {
                    return $scope.columnsOptions;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });

        $scope.toggleAnimation = function () {
            $scope.animationsEnabled = !$scope.animationsEnabled;
        };
    };
});

admin_app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, columnsOptions) {

    $scope.columnsOptions = columnsOptions;
    $scope.selected = {
        columnsOption: $scope.columnsOptions[0]
    };

    $scope.ok = function () {
        var columns = [];
        for (var i = 0; i < $scope.selected.columnsOption; i++) {
            columns.push({
                type: $scope.selected.columnsOption,
                elements: []
            });
        }
        //update formRows var with new columns
        $scope.formRows = [
            {
                'layout': $scope.selected.columnsOption,
                columns: columns
            }
        ];
        console.log(' $scope.formRows ', $scope.formRows[0].columns.length);
        $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

console.log 显示列已根据用户输入正确更新，但 HTML 不会重新渲染以隐藏 HTML 片段，因为列不再是空数组。我在这里遗漏了什么，我的方法有问题吗？正如我提到的，我对 Angular 很陌生。

Answer 1

如果我理解正确，您的数据结构是这样的：
formRows -> 数组
行 -> 包含另一个对象列的对象
列 -> 数组

我认为问题在于 Angular 正在跟踪对 formRows 的任何更改，当您的列对象更改时不会发生这些更改，因为 formRows 没有直接更改。可以说，Angular 并没有尝试在子子对象级别检查更改。您可以在每次更改行时创建一个新对象并将其添加回 formRows。或者你可以添加一个 deepwatch 来检查你的 columns 数组的变化。检查这个：

How to deep watch an array in angularjs?