I need to change the onclick button to angular.js

Question

Good evening. I’m using Bootstrap paging with Angular.js . I can get the database data and list it, it was beautiful, etc... the way I needed it.

However, I need to open a modal window and it worked when I was using the javascript functions I know like Onclick.

But using angular paging, my onclick function does not work. Below is the link and documentation of the pagination with Angula.js:

http://www.angularcode.com/angularjs-datagrid-paging-sorting-filter-using-php-and-mysql/

I have the following function to call:

<script type="text/javascript">

function detalhes(id) {
    $('#myModal').modal('show');
    $("#conteudoModal").load('verProduto.php?id=' + id);
}

And in the pagination, list of products I have the button:

<td><button type="button" class="btn btn-primary btn-mini" data-toggle="modal" onclick="detalhes({{data.id}})">+ Detalhes</button></td>

The problem is here:

onclick="detalhes({{data.id}})"

The id arrives in this format: {{date id.}} , I’ve used quotation marks, +, and nothing rsrrsrsr. Would there be any way to work this better? I don’t know much about Angular.js , I just picked it up and adapted it and it was beautiful...but I need the button working...

As requested, follow the controller:

var app = angular.module('produtos', ['ui.bootstrap']);
app.filter('startFrom', function() {
return function(input, start) {
    if(input) {
        start = +start; //parse to int
        return input.slice(start);
    }
    return [];
}
});
app.controller('produtosCrtl', function ($scope, $http, $timeout) {
    $http.get('../html/paginacao/ajax/getProdutos.php').success(function(data){
        $scope.list = data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 5; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter  
        $scope.totalItems = $scope.list.length;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
});

Could you help me with that?

Answer 1

Solution:

$scope.detalhes = function (id) {
    $('#myModal').modal('show');
    $("#conteudoModal").load('verProduto.php?id=' + id);
};