AngularJS开放模式与阵列的具体数据 [英] AngularJS open modal with specific data from array

问题描述

所以，我想一个模式添加到页面与客户的名单。当我打开模式我需要它有数据从特定的客户端。

我能够打开另一个寻呼机的时候，发送ID trought的URL要做到这一点，但是当我需要与形式上要做到这一点，我不能。

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.

这是code我到目前为止有：
注：没有尝试从客户端中打开特定的数据，一切工作正常。

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

page.html即可的

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 的

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 的

modal.html

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

我使用这个模式插件，但由于我是新来的 AngularJS ，我不知道该怎么做。

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

推荐答案

第一个问题，我是从客户端发送 ID 控制器。而不是使用 NG-点击=clickToOpen（{{client.id}}）我用它在一个 ID 这样的： ID ={{} client.id} 然后我刚刚获得的价值和运行函数由他的 ID 和发送模态插件。

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.

像@Arafeek说，我不得不用自己的code以补充功能，结果是这样的：

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];  
        }
    }
}

和模态里面我只是访问这些数据通常为： {{} clients.name} 等...

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

这篇关于AngularJS开放模式与阵列的具体数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！