нг-если внутри нг-повтор не обновляется с контроллера

0

Поэтому я новичок в 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');
    };
});

Консоль.log показывает, что столбцы были правильно обновлены на основе пользовательского ввода, но HTML не перерисовывается, чтобы скрыть часть HTML, поскольку столбцы больше не являются пустым массивом. Я что-то пропустил здесь, что-то не так с моим подходом? Как я уже говорил, я очень новичок в Angular.

Теги:
angularjs-ng-repeat
angular-ng-if

1 ответ

0
Лучший ответ

Если я правильно понимаю, ваша структура данных выглядит примерно так:
formRows → Array
row → Object, который содержит другие столбцы объекта
столбцы → Массив

Я думаю, проблема заключается в том, что Angular отслеживает любые изменения formRows, которые не происходят, когда объект столбцов изменяется, потому что нет прямых изменений в formRows. Угловой не пытается проверить изменения на уровне суб-субъектов, так сказать. Вы можете создавать новый объект каждый раз, когда вы меняете строки и добавляете его обратно в formRows. Или вы можете добавить глубину для проверки изменений в массиве столбцов. Проверь это:

Как глубоко наблюдать массив в angularjs?

  • 0
    но почему это работает, если я использую $ rootScope?
  • 0
    структура выглядит примерно так: Rows [] -> Columns [] -> Elements []
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню