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 - ＆gt;阵列
行 - ＆gt;包含另一个对象列的对象
列 - ＆gt;数组

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

How to deep watch an array in angularjs?

ng-if内部ng-repeat未从控制器

1 个答案: