Как получить выбранное значение из выпадающего списка в таблице в Angular Js

0

В моем проекте у меня есть таблица, показывающая список данных. У меня также есть кнопка в таблице, чтобы получить информацию о выбранной записи, в этом случае я хочу получить идентификатор и выбранное значение из раскрывающегося списка, которое находится в таблице. Так,

У меня есть контроллер с двумя массивами вроде этого:

$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: Еще одна вещь, о которой я, возможно, забыл упомянуть... когда я выбираю раскрывающийся список для первой записи в таблице. Она автоматически заполняет все остальные выпадающие таблицы. Как я могу изменить это, чтобы заполнить раскрывающийся список для выбранной записи в таблице?

Теги:

2 ответа

3
Лучший ответ

Измените свой 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 предлагает для достижения этого.

Надеюсь, что это ответ на ваш вопрос.

  • 0
    Спасибо работает хорошо .. пожалуйста, смотрите мой обновленный вопрос! Спасибо
  • 0
    Это потому, что одна и та же переменная связана с помощью ng-model для каждого выпадающего списка. Плохо, что я забыл, что ng-model находится внутри оператора ng-repeat . Я обновил свой ответ. Дайте мне знать, если это решит проблему.
Показать ещё 1 комментарий
0

В кнопке вы можете передать весь объект и получить требуемые данные.

HTML

<button ng-click="vm.getDetails(a,b)"> getInfo </button>

контроллер

$scope.getDetails = function(user,payment)
{
    console.log(user.Name+" has "+payment.Status)
}
  • 0
    Спасибо .. не могли бы вы взглянуть на мой обновленный вопрос? благодарю вас .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню