AngularJS open modal with specific data from array

Question

So, i'm trying to add a modal to a page with a list of clients. When i open the modal i need it to have the data from that specific client.

I was able to do this when opening another pager, sending the id trought the url, but when i need to do this with the modal, i'm not able.

This is the code i have so far: Note: Without trying to open the specific data from client, everything is working fine.

page.html

<div class="col-md-6 cli--text">
    <h3>{{client.name}}</h3>
    <p ng-bind-html="client.desc | html"></p>
    <a ng-click="clickToOpen({{client.id}})">More</a>
</div>

app.js

myApp.controller('CliCtrl', function ( $scope, $http, $routeParams, modals, ngDialog) {
    $scope.get_client = function() {
        $http.get("scripts/data/client.json")
        .success( function(data) {
            $scope.pagedclient = data;
        })
        .error(function(data) {
            alert("Something wrong.");
        });
    };

    $scope.clickToOpen = function (data) {
        ngDialog.open({ 
            template: 'scripts/data/modal.html',
            closeByDocument: true,
            closeByEscape: true
        });

        function getById(arr, id) {
            for (var d = 0, len = arr.length; d < len; d += 1) {
                if (arr[d].id === id) {
                    return arr[d];  
                }
            }
        }

        $scope.get_client().then(function(){
            $scope.clients = getById($scope.detRes,data);
        });
        $scope.nameclient = clients.name;
    };

});

modal.html

<div class="modal--body">
    <h2>Modal template</h2>
    <h3>{{nameclient}}</h3>
</div>

I'm using this modal plugin, but since i'm new to AngularJS, i don't know exactly what to do.

arafeek · Accepted Answer · 2015-06-18 14:14:54Z

1

In the README for the plugin that you are using, it says that you can specify the scope variable that the modal will use. So try modifying your code to something like

    ngDialog.open({ 
        template: 'scripts/data/modal.html',
        closeByDocument: true,
        closeByEscape: true,
        scope: $scope
    });

This should give your modal access to $scope.nameclient which will allow {{nameclient}} to be evaluated correctly.

answered Jun 18, 2015 at 14:14

arafeek

755 bronze badges

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

Comments

TheOpti · Accepted Answer · 2015-06-18 14:04:39Z

0

You can use resolve function to pass data to your modal template and its controller:

resolve: {
    myArray: function passArray() {
        return $scope.myArray;
    }
}

Check documentation here

answered Jun 18, 2015 at 14:04

TheOpti

1,6713 gold badges21 silver badges38 bronze badges

Comments

celsomtrindade · Accepted Answer · 2015-06-18 20:28:07Z

The first problem i had was to send the id from the client to the controller. Instead of using ng-click="clickToOpen({{client.id}})" i used it on an id like: id="{{client.id}}. Then i just had to get the value and run the function to filter the client by his ID and send to the modal plugin.

Like @Arafeek said, i had to use his code to complement the function, and the result was this:

$scope.clickToOpen = function (event) {
    ngDialog.open({ 
        template: 'scripts/data/modal.html',
        scope: $scope
    });
    $scope.idCli = (event.target.id);
    $scope.clients = getById($scope.pagedclient,$scope.idCli);
};

function getById(arr, id) {
    for (var d = 0, len = arr.length; d < len; d += 1) {
        if (arr[d].id === id) {
            return arr[d];  
        }
    }
}

And inside the modal i just access the data normally: {{clients.name}} etc...

Collectives™ on Stack Overflow

AngularJS open modal with specific data from array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related