У меня возникла проблема с заполнением таблицы с помощью 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 щелкнул список всех данных, связанных с этой строкой, выбранной в сетке. Например: Нажмите первую строку, покажите данные первой строки. Нажмите вторую строку, покажите данные второй строки и т.д.
Так что пара вещей.
Сначала в вашем 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
Надеюсь это поможет!