Как использовать угловой повтор с ng-grid и щелкнуть мышью?

Question

Как использовать угловой повтор с ng-grid и щелкнуть мышью?

0

У меня возникла проблема с заполнением таблицы с помощью ng-repeat после щелчка cellTemplate ng-click.

 cellTemplate: '<div  ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>'

В этом методе foo я пытаюсь передать результаты на страницу html.

$scope.results = $scope.source;
          $scope.foo = function(ngClickResult) { 
            $scope.showNgClick = this.result;
            $scope.ngClickResults = ngClickResult;

Здесь определяется $ scope.source.

   angular.forEach($scope.items, function (item) {
                    if(item.fname === enteredValue.firstName ){
                        arrItem.push({
                            first: item.fname,
                            last: item.lname,
                            address: item.address,
                            phone: item.phone

                        });
                    }
                });
                $scope.source= arrItem;

HTML

 <tr data-ng-repeat="ngClickResult in ngClickResults">
 <td>First Name:{{showNgClick.firstName}}</td>
 <td>Last Name:{{showNgClick.lastName}}</td>
 <td>Address:{{showNgClick.address}}</td>
 <td>Phone:{{showNgClick.phone}}</td></tr>

Что-то подсказывает мне мои результаты/источник. Что мне не хватает?

Здесь plnkr

Найдите Тима для начала поиска.

Моя цель - заполнить таблицу под NG Click Results данными, указанными в сетке NG. Я хотел бы показать имя, фамилию, адрес и телефон под результатами NG Click. Я хочу, чтобы ng щелкнул список всех данных, связанных с этой строкой, выбранной в сетке. Например: Нажмите первую строку, покажите данные первой строки. Нажмите вторую строку, покажите данные второй строки и т.д.

Sunny 02 июль 2015, в 17:28

Источник

Теги:

javascript

angularjs

angular-ngmodel

angularjs-scope

angularjs-ng-repeat

1 ответ

Ещё вопросы

Brandon · Accepted Answer · 2015-07-02T14-59-00.000Z

Так что пара вещей.

Сначала в вашем cellTemplate у вас есть вызов foo, но вы не передавали ему что-либо, чтобы использовать его в качестве ссылки на какую строку вы нажали. Я бы предложил передать объект строки в foo, таким образом вы можете ссылаться на данные через row.entity.

cellTemplate: '<div  ng-click="foo(row)" ng-bind="row.getProperty(col.field)"></div>'

Во-вторых, в вашем js, если вы хотите, чтобы список строк был нажат, вы, вероятно, хотите инициализировать список в области $ scope, а затем добавить/удалить из этого списка, когда пользователь нажимает, и ng-repeat в этом списке. В вашем текущем коде ngClickResults просто получает привязку к переменной, переданной в foo.

$scope.ngClickResults = {};

$scope.foo = function(row) {
  //check if row is already selected if it is unselect else add row
  if (!$scope.ngClickResults[row.rowIndex]) {
    $scope.ngClickResults[row.rowIndex] = row.entity;
  } else {
    delete $scope.ngClickResults[row.rowIndex];
  }
};

Наконец, кажется, что в вашем html ng-repeat задает переменную ngClickResult, но затем вы не используете ее в следующих определениях td. Не используя переменную ng-repeat (ngClickResult), вы снова и снова повторяете один и тот же объект для каждого элемента в коллекции ngClickResults. Также в вашем td вы ссылаетесь showNgClick свойства firstName и lastName, но они определены как fname/lname в json, а первое и последнее - в ваших объектах строки сетки.

<tr data-ng-repeat="(key, ngClickResult) in ngClickResults">

        <td>First Name:{{ngClickResult.first}}</td>

        <td>Last Name:{{ngClickResult.last}}</td>

        <td>Address:{{ngClickResult.address}}</td>

        <td>Phone:{{ngClickResult.phone}}</td>
</tr>

Я внес некоторые из этих изменений в следующий плункер. Когда вы нажимаете на строку, она должна создать строку в таблице ниже сетки.

Обратите внимание, что я понял, что есть ошибка, когда сетка не вызывает foo для каждого щелчка, поэтому иногда она выделяет строку, а не добавляет или удаляет элемент из карты выбранных строк.

http://plnkr.co/edit/27KeKdlPGkflBPMAdvID?p=preview

Надеюсь это поможет!

Просто чтобы добавить к этому ответу. Вероятно, ему было бы лучше использовать встроенный выбор строк, который предлагает ng-grid в 3.0. ui-grid.info/docs/#/tutorial/210_selection
Спасибо Брэндон и КрипN. Случайно ли вы знаете, почему моя функция setPagingData не отвечает должным образом? Общее количество элементов правильное, но размер страницы - нет. Там должно быть только 5 на страницу.