javascript - AngularJs查看用户详细信息

Question

我正在构建一个网站，并且有一些用户或客户。为此，我有一个通用表，其中仅包含一些基本信息，例如 name、type 和 e-mail，我想显示所有客户/用户信息在另一个页面中，因为每个客户/用户都会有更多信息，例如电话、地址等。

旧方法
由于我是 angularjs 的新手，所以我还无法做到这一点。我有一个旧网站，使用 HTML 和 PHP。我的做法是通过url发送用户id，然后，在新页面(det_user.php)中，我获取这个URL参数来调用所有用户信息，然后将其加载到一张 table 。

这是使用 AngularJS 实现这一点的最佳方法吗？ 如果有另一种方法可以不通过 URL 发送 id，但可以让用户能够刷新/共享页面链接，请告诉我。

我尝试做什么

我正在尽我所能寻找答案，但找不到任何完整的答案，只是找到了一些部分。所以这是我到目前为止尝试过的:

scripts.js

var myApp=angular.module("myApp",["ngRoute"]);

myApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Home',
        {
            controller: 'HomeCtrl',
            templateUrl: 'content/home.html'
        })
        .when('/cliente',
        {
            controller: 'ClienteCtrl',
            templateUrl: 'content/cliente.html'
        })
        .when('/detcli/:id',
        {
            controller: 'DetCli',
            templateUrl: 'content/detclinte.html'
        })
        .otherwise({
            redirectTo: '/Home'
        });
});

myApp.controller('ClienteCtrl', function ($scope, $http, $routeParams) {
    $scope.get_cliente = function() {
        $scope.loading = true;
        $http.get("scripts/php/db.php?action=get_cliente")
        .success( function(data) {
            $scope.pagedClientes = data;
            $scope.loading = false;
        })
        .error(function(data) {
        });
    };
});

myApp.controller('DetCli', function ($scope, $http, $routeParams) {
    var clienteId = $routeParams.clienteId;
    //more functions here?
});

cliente.html

<div class="block" ng-controller="ClienteCtrl">
<tbody ng-init="get_cliente()">
    <tr ng-repeat="cliente in pagedClientes | filter:searchField | filter:clifilter | orderBy:sortType:sortReverse">
        <td>{{cliente.nome}}</td>
        <td>{{cliente.tipo}}</td>
        <td>{{cliente.email}}</td>
        <td >
            <a href="#/detcliente/:clienteid">View</a>
            <a ng-click="cli_edita(cliente.id)">Edit</a>
            <a ng-click="cli_deleta(cliente.id)">Del</a>
        </td>
    </tr>
</tbody>
</div>

detcliente.html
我不太确定如何运行此页面上的代码

<div class="block" ng-controller="DetCli">
    <tbody ng-init="get_detcliente()">
        <tr>
            <td>Name</td>
            <td>{{cliente.nome}}</td>
        </tr>
        <tr>
            <td>Email</td>
            <td>{{cliente.email}}</td>
        </tr>
        <tr>
            <td>Phone</td>
            <td>{{cliente.phone}}</td>
        </tr>
        [...more data...]
    </tbody>
</div>

现在谢谢你。

编辑:

感谢@pankajparkar，我已经快到了，我可以将 id 从 cliente.html 传递到 detcliente.html 现在的问题似乎是将我从服务器获取的数据与要过滤的代码集成起来通过 id 来获取。经过一番搜索后，我可以得到这个代码，但仍然不起作用..这似乎是 json 数据，我需要将其发送到按 id 进行过滤。任何想法？这是代码。

myApp.controller('DetcliCtrl', function ($scope, $http, $routeParams, $filter) {
    var clienteId = $routeParams.id;

    $scope.mainmsg = "Detalhes do cliente " + $routeParams.id;
    $scope.search = function() {
        var url = 'scripts/php/db.php?action=get_cliente';
        $http.get(url).success( function(data) {
            $scope.pagedClientes = data;
        }).error(function() {
            alert('Unable to get back informations :( ');
        });
    }

    var resultado = $filter('filter')(data.results, {id:clienteId})[0];
    $scope.nome = resultado.nome;

});

Answer 1

在您的 DetCli 中 Controller 应该是 $routeParams.id;而不是$routeParams.clienteId;

myApp.controller('DetCli', function ($scope, $http, $routeParams) {
    var clienteId = $routeParams.id; //<--change here
    //more functions here?
});

&您的href应该是<a ng-href="#/detcliente/{{cliente.id}}">View</a>这样href将被正确创建。那么你会得到正确的 clientId从 url 使用 $routeParams .

标记

<tbody ng-init="get_cliente()">
    <tr ng-repeat="cliente in pagedClientes | filter:searchField | filter:clifilter | orderBy:sortType:sortReverse">
        <td>{{cliente.nome}}</td>
        <td>{{cliente.tipo}}</td>
        <td>{{cliente.email}}</td>
        <td >
            <a ng-href="#/detcliente/{{cliente.id}}">View</a>
            <a ng-click="cli_edita(cliente.id)">Edit</a>
            <a ng-click="cli_deleta(cliente.id)">Del</a>
        </td>
    </tr>
</tbody>