Можно ли передать значение из ng.repeat в функцию JavaScript?

Question

Можно ли передать значение из ng.repeat в функцию JavaScript?

0

У меня есть этот раздел:

<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                    <td>{{data.name}}</td>
                    <td>{{data.price}}</td>
                    <td>{{data.img}}</td>

<script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3 dir="rtl" align="center">screenshot</h3>
                    </div>
                    <form ng-submit="submit()">
                      <div class="modal-body">
                        <img ng-src="{{data.img}}">
                      </div>
                      <div class="modal-footer">
                          <button class="btn btn-warning" ng-click="cancel()">close</button>
                      </div>
                    </form>
                </script>
                    <button ng-click="open()">open</button>

как бы то ни было, не передавать значение из {{data.img}} в javascript, который открывает модальное окно. есть идеи?

благодарю!!

necross 25 июнь 2015, в 20:36

Источник

Теги:

javascript

angularjs

bootstrap-modal

2 ответа

0

Я вижу, что вы отметили bootstrap-modal, поэтому я предполагаю, что вы его используете.

Вам нужно передать переменную в модальную, используя ключ разрешения, когда вы открываете модальный. Демонстрация для модального должна иметь это.

var modalInstance = $modal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: { // here
    items: function () {
      return $scope.items;
    }
  }
});

В модульном контроллере вы получаете переменную как услугу

controller('ModalInstanceCtrl', function ($scope, $modalInstance, items)

И затем назначьте его переменной области, чтобы ваш модальный шаблон мог ее видеть

$scope.items = items;

С сайтом, указанным в комментарии:

var ModalDemoCtrl = function ($scope, $modal) {
    $scope.open = function () {

    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'full',
        controller: function ($scope, $modalInstance, data) {
            $scope.data = data;
            $scope.cancel = function () {
                $modalInstance.dismiss('סגור');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            }
        }
    });
};

Icycool 25 июнь 2015, в 16:10

0

СПАСИБО!!! работает отлично!
necross 25 июнь 2015, в 18:36
0

NP! Вам нужно будет часто использовать этот шаблон, если вы работаете с модалами.
Icycool 25 июнь 2015, в 18:38
0

Есть 404 по ссылке, любая ошибка?
Icycool 26 июнь 2015, в 18:43
0

Убедитесь, что вы скопировали всю ссылку, гиперссылка, похоже, не улавливает всю ссылку.
necross 26 июнь 2015, в 18:44
0

Кроме того, вы можете видеть, что я передаю только дополнительную строку 'משרדיה' для последнего столбца, но она фактически отображает ее в каждом открываемом окне.
necross 26 июнь 2015, в 18:52
0

Вы используете шаблон неправильно. Шаблон должен быть объявлен вне ng-repeat, чтобы он не был повторно объявлен в каждой ячейке. Это также причина, по которой вы получаете дополнительную строку в каждом месте - последний шаблон перезаписывает другие, потому что они используют один и тот же идентификатор. Вы можете поместить его после того, как импортируете все сценарии до </body>
Icycool 26 июнь 2015, в 19:07
0

И старайтесь не отправлять изображения по данным BLOB-объектов, это делает загрузку сайта очень медленной. Сделайте их доступными по разным путям, чтобы сначала можно было загружать таблицу, а затем загружать изображение, только когда открыт модальный режим.
Icycool 26 июнь 2015, в 19:08
0

Так что же нужно оставить внутри ng-repeat?
necross 26 июнь 2015, в 19:15
0

И я действительно хотел бы поставить их на отдельный путь, я просто не мог понять, как это сделать. Я действительно ценю всю помощь!
necross 26 июнь 2015, в 19:17
0

Просто переместите блок <script> содержащий шаблон.
Icycool 26 июнь 2015, в 19:18
0

Для изображения по отдельному пути просто поместите их в другую папку, например / images, и убедитесь, что вы можете получить к ним доступ по URL.
Icycool 26 июнь 2015, в 19:20
0

Хорошее место было бы на одном уровне с папкой app и css, тогда вы можете получить доступ к изображению по image/filename
Icycool 26 июнь 2015, в 19:22
0

Я буду менять изображения. с тегом сценария, если вы посмотрите на содержимое, каждый сценарий получает свою переменную. первый получает data.dioPlusImage, второй получает inkDepotImage и так далее. Если я переместу скрипт наружу, мне нужно будет найти способ передать имя переменной в скрипт.
necross 26 июнь 2015, в 19:24
0

Хакерским способом было бы поместить все возможные значения в шаблон и показать только доступное <img ng-src="{{data.img1}}" ng-show="!!data.img1"> <img ng-src="{{data.img2}}" ng-show="!!data.img2"> <img ng-src="{{data.img3}}" ng-show="!!data.img3">
Icycool 26 июнь 2015, в 19:29
0

Правильным способом будет стандартизация вашего ключа, или вы можете использовать функцию для получения правильного ключа ng-src="{{getImgUrl()}}
Icycool 26 июнь 2015, в 19:31
0

Хакерский путь не очень хорошо работает :) посмотрим, что происходит сейчас. это довольно забавно! У вас есть пример для функции getImgUrl ?
necross 26 июнь 2015, в 19:46
0

Мне нужно опубликовать как ответ для облегчения чтения
Icycool 26 июнь 2015, в 19:47
0

Звучит хорошо. Еще раз спасибо!
necross 26 июнь 2015, в 19:54

Показать ещё 16 комментариев

Ещё вопросы

NP! Вам нужно будет часто использовать этот шаблон, если вы работаете с модалами.
Убедитесь, что вы скопировали всю ссылку, гиперссылка, похоже, не улавливает всю ссылку.
Кроме того, вы можете видеть, что я передаю только дополнительную строку 'משרדיה' для последнего столбца, но она фактически отображает ее в каждом открываемом окне.
Вы используете шаблон неправильно. Шаблон должен быть объявлен вне ng-repeat, чтобы он не был повторно объявлен в каждой ячейке. Это также причина, по которой вы получаете дополнительную строку в каждом месте - последний шаблон перезаписывает другие, потому что они используют один и тот же идентификатор. Вы можете поместить его после того, как импортируете все сценарии до </body>
И старайтесь не отправлять изображения по данным BLOB-объектов, это делает загрузку сайта очень медленной. Сделайте их доступными по разным путям, чтобы сначала можно было загружать таблицу, а затем загружать изображение, только когда открыт модальный режим.
Так что же нужно оставить внутри ng-repeat?
И я действительно хотел бы поставить их на отдельный путь, я просто не мог понять, как это сделать. Я действительно ценю всю помощь!
Просто переместите блок <script> содержащий шаблон.
Для изображения по отдельному пути просто поместите их в другую папку, например / images, и убедитесь, что вы можете получить к ним доступ по URL.
Хорошее место было бы на одном уровне с папкой app и css, тогда вы можете получить доступ к изображению по image/filename
Я буду менять изображения. с тегом сценария, если вы посмотрите на содержимое, каждый сценарий получает свою переменную. первый получает data.dioPlusImage, второй получает inkDepotImage и так далее. Если я переместу скрипт наружу, мне нужно будет найти способ передать имя переменной в скрипт.
Хакерским способом было бы поместить все возможные значения в шаблон и показать только доступное <img ng-src="{{data.img1}}" ng-show="!!data.img1"> <img ng-src="{{data.img2}}" ng-show="!!data.img2"> <img ng-src="{{data.img3}}" ng-show="!!data.img3">
Правильным способом будет стандартизация вашего ключа, или вы можете использовать функцию для получения правильного ключа ng-src="{{getImgUrl()}}
Хакерский путь не очень хорошо работает :) посмотрим, что происходит сейчас. это довольно забавно! У вас есть пример для функции getImgUrl ?
Мне нужно опубликовать как ответ для облегчения чтения

Icycool · Accepted Answer · 2015-06-26T18-33-00.000Z

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

$scope.open = function (imageKey) {
    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'full',
        controller: function ($scope, $modalInstance, data, imageKey) {
            $scope.data='';
            $scope.data = data;

            $scope.getImage = function () {
                return $scope.data[imageKey];
            }

            $scope.cancel = function () {
                $modalInstance.dismiss('סגור');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            },
            imageKey: function() {
                return imageKey;
            }
        }
    });
}

В шаблоне (пропустите ключ, который вы хотите использовать):

<button ng-click="open('dioPlusImage')">פתח צילום מסך</button>

В модальном шаблоне:

<img ng-src="{{getImage()}}>"

и что входит в img ng-src в этом типе решения?
Добавлено в ответ. Извините, я случайно добавил imageKey как функцию param