CODEWITHSUNDEEP
javascriptangularjs
Bernie
Bernie

Reputation: 1651

AngularJS: Table with links

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.

Upvotes: 1

Views: 3582

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

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.

Upvotes: 5

Related Questions