AngularJs 查看用户详情

Question

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

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

这是 AngularJS 的最佳方式吗？如果有另一种方法无需通过 URL 发送 id，但要让用户能够 refresh/share 页面 link，请告诉我。

我尝试做的事情

我一直在尽我所能寻找答案，但找不到任何完整的答案，只有部分答案。所以这是我到目前为止所做的尝试：

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>

AngularJs 查看用户详情

AngularJs view user details

javascript

url-routing

angularjs

single-page-application

angularjs-routing

编辑：