单击时获取一行中的值并将其传递给弹出窗口 [英] Get value in a row on click and pass it to popup

问题描述

我需要在单击时获取表格行中的值并将其显示在弹出窗口中

I need to get the value in a row of a table on click and display it in popup

HTML:

<md-data-table-container>
    <table md-data-table class="md-primary" md-progress="deferred">
        <thead md-order="query.order" md-trigger="onorderchange">
            <tr>
                <th name="Task To Be Done"></th>
                <th name="Office"></th>
                <th name="Due Date"></th>
            </tr>
        </thead>
        <tbody ng-click="showAlert($event)">
            <tr ng-repeat="dessert in desserts.data" ng-click="showAlert($index)" flex-sm="100" flex-md="100" flex-gt-md="auto">
                <td>{{dessert.task}}</td>
                <td></td>
                <td>{{dessert.due_on}}</td>
            </tr>
        </tbody>
    </table>
</md-data-table-container>

JS:

$scope.desserts = {
    "count": 6,
    "data": [{
        "task": "Frozen yogurt",
        "type": "Ice cream"
    }, {
        "task": "Ice cream sandwich",
        "type": "Ice cream"
    }, {
        "task": "Eclair",
        "type": "Pastry"
    }, {
        "task": "Cupcake",
        "type": "Pastry"
    }, {
        "task": "Jelly bean",
        "type": "Candy"
    }, {
        "task": "Lollipop",
        "type": "Candy"
    }, {
        "task": "Honeycomb",
        "type": "Other"
    }]
};
$scope.showAlert = function (index) {
    $scope.obj = $scope.desserts.data[2];
    $scope.task = $scope.obj.task;
    alert($scope.task);
    console.log($scope.task);
};

我的代码中的问题是我可以获取指定为.data[2]"的数组的值.实际上，当我单击表中的一行时，我需要显示该值以弹出sweetAlert".有什么解决办法

issue in my code is that i could get the value on the array which i have specified ".data[2]". Actually when i click a row in my table i need that value to be displayed to popup "sweetAlert". is there any solution

推荐答案

不要传递 $index，因为如果底层数据发生变化，这可能有点危险，在这种情况下只是强制您从数组中重新获取该项目.

Don't pass the $index, as this can be a bit dangerous if the underlying data changes, and in this case it just forces you to re-get the item from the array.

将要显示的实际项目传回警报.

Pass the actual item you want to display back to the alert.

<tr ng-repeat="dessert in desserts.data" ng-click="showAlert(dessert)" flex-sm="100" flex-md="100" flex-gt-md="auto">
                <td>{{dessert.task}}</td>
                <td></td>
                <td>{{dessert.due_on}}</td>
            </tr>

除非您在其他地方确实需要，否则不要分配范围.

Don't assign to scope unless you really need it elsewhere.

$scope.showAlert = function (dessert) {
   alert('Task:' + dessert.task);
   // if you're just using a variable in this function, declare it locally
   var dessertType = dessert.type;
   console.log(dessertType);
};

查看 $index 导致问题的示例:

See an example of $index causing issues:

http://codeutopia.net/blog/2014/11/10/angularjs-best-practices-avoid-using-ng-repeat-index/comment-page-1/

这篇关于单击时获取一行中的值并将其传递给弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！