AngularJS: Table with links

Question

I want to make a table in AngularJS, which should look like that:

id  |  weekday  |  time  | Actions
1   |  Mon      | 10:10  | Edit-Link, Delete-Link
2   |  Tue      | 15:19  | Edit-Link, Delete-Link

My curent code is:

<html ng-app>
    ...
    <script type="text/javascript">
        function DB($scope) {
            $scope.currentQs = null;
            $scope.jsons = JSON.parse('${jsons}');
            $scope.edit = function(id) {
                console.log("Edit " + id);
            }
            $scope.delete = function(id) {
                console.log("Delete " + id);
            }
        }
    </script>
    <body ng-controller="DB">
        <table>
            <tbody ng-repeat="qs in jsons">
                <tr>
                    <td>{{qs.query_id}}</td>
                    <td>{{qs.weekday}}</td>
                    <td>{{qs.hour}}:{{qs.minute}}</td>
                    <td>
                        <!-- I guess, I'm thinking in the wrong way with the a-tags -->
                        <!-- How do I put the current object (qs) as $scope.currentQs -->
                        <a href="#" ng-click="edit('{{qs.query_id}}')">Edit</a>
                        <a href="#" ng-click="delete('{{qs.query_id}}')">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Ok, the table is fine. But what is the right way to set the Edit- and the Delete-Link?

Thanks. Bernhard

PS: Just began yesterday looking at AngularJS.

ng-href={{ functionThatGeneratesUrl(qs) }} ?

zerkms
– zerkms

2013-11-07 22:33:29 +00:00
Commented Nov 7, 2013 at 22:33 — zerkms
– zerkms, Commented Nov 7, 2013 at 22:33

Davin Tryon · Accepted Answer · 2013-11-07 22:49:36Z

5

Inside the ng-click you don't need to interpolate {{ }} because it is already in the angular execution context:

<a href="#" ng-click="edit(qs.query_id)">Edit</a>
<a href="#" ng-click="delete(qs.query_id)">Delete</a>

So, the above should work for you.

answered Nov 7, 2013 at 22:49

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bernie Over a year ago

Thanks, it worked like that. Sorry for not giving you +1, I can't do because I don't have enough "reputation" myself.

Davin Tryon Over a year ago

No probs, glad to that I could help. :)

Collectives™ on Stack Overflow

AngularJS: Table with links

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related