0

В таблице данных вызывается модал при клике на изображение. В модале выводятся данные из выбранной строки. Если воспользоваться фильтром поиска, то формируется новая таблица. И если в этой (новой) таблице вызвать модал кликом на изображение, то в модале выводятся данные из предыдущей (а не из новой таблицы, т.е. данные в модале не соответствуют выбранной строке). Как создать новый массив данных, чтобы выбор атрибутов происходил из нового массива данных при вызове модала? Пример на plnker

HTML

<form>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search ..." ng-model="searchCity">
            <button class="btn btn-primary" ng-click="searchCity = ''">Press to clear</button>
    </div>
</form>

<td>{{d.customerNumber}}</td>
<td ng-click="vm.open($index)"><img class="img-size" ng-src="{{d.image}}"></td>
<td>{{d.Country}}</td>
<td>{{d.City}}</td>
<td>{{d.Population}}</td>  

JS

$http.get('dataset.json').then(function(x) {
        vm.datasets = x.data;
    });


vm.open = function(index) {

        var modalInstance = $modal.open({
            scope: $scope,//
            templateUrl: "modalContent.html",
            controller: ModalInstanceCtrl,
            resolve: {
                index: function() {
                    return index;
                },
                datasets: function () {
                    return vm.datasets
                }
            }
        });
  };

var ModalInstanceCtrl = function ($scope, datasets, index) {
    var vm = this;
    vm.datasets = datasets;
    $scope.selected = {
        item: vm.datasets[index]
    };
}

2 ответа 2

0

Проблему лучше решать с другой стороны: вместо передачи индекса и получения по нему элемента, можно сразу передавать элемента.

Пример на Plnkr

<td ng-click="vm.open(d)">

resolve: {
    item: function() {
        return item;
    },

var ModalInstanceCtrl = function ($scope, datasets, item) {
    var vm = this;
    vm.datasets = datasets;
    $scope.selected = {
        item: item
    };
}
1
  • оба варианта рабочие, выбрал второй. Всем спасибо за подсказку!)
    – alexeyll
    30 мая 2018 в 12:19
0

app.js

datasets: function () {
    return vm.datasets
}

заменить на

datasets: function () {
    return vm.filteredDatasets
}

index.html

ng-repeat="d in vm.datasets | filter:searchCity"

заменить на

ng-repeat="d in (vm.filteredDatasets = (vm.datasets | filter:searchCity))"
1
  • и этот вариант работает!)
    – alexeyll
    30 мая 2018 в 12:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.