В моем проекте у меня есть таблица, показывающая список данных. У меня также есть кнопка в таблице, чтобы получить информацию о выбранной записи, в этом случае я хочу получить идентификатор и выбранное значение из раскрывающегося списка, которое находится в таблице. Так,
У меня есть контроллер с двумя массивами вроде этого:
$scope.selectItem = "";
$scope.ArrayOne = [{Id: 1, Name: "John Doe" },
{Id: 2, Name: "Jane Doe" }]
$scope.ArrayTwo = [{Id: 1, Status: "Paid"},
{Id: 2, Status: "Unpaid"}]
$scope.getDetails = function(id){
console.log(id) // getting Id here but I also need to some get the Id of the selected item in the dropdown but I'm not too sure on how to achieve this.
}
Затем я перебираю массивы в своем представлении следующим образом:
<table>
<tr ng-repeat="a in ArrayOne">
<td>{{a.Id}}</td>
<td>{{a.Name}}</td>
<!-- looping through array two here -->
<td>
<select ng-model="selectedItem.Id" ng-options="b.Id as b.Status"></select>
<td>
<td><button ng-click="vm.getDetails(a.Id)"> getInfo </button></td>
</tr>
</table>
Я не уверен, как это сделать, может ли кто-нибудь помочь? Или как вы собираетесь это сделать? Спасибо.
EDIT: Еще одна вещь, о которой я, возможно, забыл упомянуть... когда я выбираю раскрывающийся список для первой записи в таблице. Она автоматически заполняет все остальные выпадающие таблицы. Как я могу изменить это, чтобы заполнить раскрывающийся список для выбранной записи в таблице?
Измените свой html на следующий,
<table>
<tr ng-repeat="a in ArrayOne track by $index">
<td>{{a.Id}}</td>
<td>{{a.Name}}</td>
<!-- looping through array two here -->
<td>
<select ng-model="selectedIdArray[$index]" ng-options="b.Id as b.Status for b in ArrayTwo"></select>
<td>
<td><button ng-click="getDetails(a.Id, $index)"> getInfo </button></td>
</tr>
</table>
Теперь Id
выбранного элемента будет заполнен в переменную scope selectedIdArray
которая представляет собой массив, который вы можете использовать в своем контроллере, если знаете значение $index
.
$scope.ArrayOne = [{Id: 1, Name: "John Doe" },
{Id: 2, Name: "Jane Doe" }];
$scope.ArrayTwo = [{Id: 1, Status: "Paid"},
{Id: 2, Status: "Unpaid"}];
// Creating an array of length same as length of ArrayOne.
// Note that the default value of every element of the array will be "undefined"
$scope.selectIdArray = new Array($scope.ArrayOne.length);
$scope.getDetails = function(id, index) {
console.log(id);
console.log($scope.selectedIdArray[index]); // Id of the selected item
};
Не забудьте обработать случаи, когда пользователь нажимает кнопку, не выбирая ничего из раскрывающегося списка, проверяя, является ли параметр $scope.selectedIdArray[index]
undefined
или нет в вашей функции getDetails(id, index)
.
Причина, по которой я использовал массив для хранения выбранного значения, заключается в том, что предложение ng-model
находится внутри инструкции ng-repeat
, создавая все выпадающие списки с одинаковым значением ng-model
если мы не использовали массив. Я использовал $index
который ng-repeat
предлагает для достижения этого.
Надеюсь, что это ответ на ваш вопрос.
В кнопке вы можете передать весь объект и получить требуемые данные.
<button ng-click="vm.getDetails(a,b)"> getInfo </button>
$scope.getDetails = function(user,payment)
{
console.log(user.Name+" has "+payment.Status)
}
ng-model
для каждого выпадающего списка. Плохо, что я забыл, чтоng-model
находится внутри оператораng-repeat
. Я обновил свой ответ. Дайте мне знать, если это решит проблему.