Поэтому я новичок в 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.
Если я правильно понимаю, ваша структура данных выглядит примерно так:
formRows → Array
row → Object, который содержит другие столбцы объекта
столбцы → Массив
Я думаю, проблема заключается в том, что Angular отслеживает любые изменения formRows, которые не происходят, когда объект столбцов изменяется, потому что нет прямых изменений в formRows. Угловой не пытается проверить изменения на уровне суб-субъектов, так сказать. Вы можете создавать новый объект каждый раз, когда вы меняете строки и добавляете его обратно в formRows. Или вы можете добавить глубину для проверки изменений в массиве столбцов. Проверь это: