AngularJs 查看用户详细信息

Question

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

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

这是使用 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 控制器中，它应该是 $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 才能正确创建。然后你会使用$routeParams从url得到正确的clientId。

标记

<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>