Question

在我的项目中，我有一个显示数据列表的表。我还在表格中有一个按钮来获取所选记录的详细信息，在这种情况下，我只想从表格中的下拉列表中获取Id和所选值。所以，

我有一个带有两个数组的控制器，如下所示：

$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>

我不确定如何实现这一点，有人可以帮忙吗？或者你将如何实现这一目标？谢谢。

编辑：我可能忘记提及的另一件事......当我选择表格中第一条记录的下拉列表时...它会自动填充所有其他下拉列表桌子。如何将其更改为仅填充表格中所选记录的下拉列表？

Answer 1

将您的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将填充到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提供的{{1}}来实现这一目标。

希望这能回答你的问题。

Answer 2

在按钮中，您可以传递整个对象并获取所需的详细信息。

HTML

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

控制器

$scope.getDetails = function(user,payment)
{
    console.log(user.Name+" has "+payment.Status)
}

如何从Angular Js中的表中的下拉列表中获取所选值

2 个答案:

HTML

控制器