用于项目列表的UI-Router

UI-Router for item list Angularjs

本文关键字：UI-Router 列表 项目 用于      更新时间：2023-09-26

我正面临一些问题与我的简单代码(研究)，我真的需要一些帮助来解决这个问题。

首先我有一个php文件谁提供json.

app.php 

<?php
$dbh = new PDO('mysql:host=localhost;dbname=caio', 'root', '');
    $a = $dbh->query("SELECT * FROM usuario");
    $b = json_encode($a->fetchAll(PDO::FETCH_ASSOC));
    echo $b;
    ?>

是一个简单的json，包含id, name和姓

我也有一个Js文件来得到这个。app.js 

var meuApp = angular.module('meuApp', ['ui.router']);
meuApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
    .state('usuarios.detail', {
        url: "/usuarios/{id}",
        templateUrl: 'uDetail.html'
    });
    });

    meuApp.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('app.php')
    .success(function(data) {
         $scope.usuarios = data;
         console.log(data);
         //just checking in the console...
          var id = data[0].id
          console.log(id);
          var nome = data[0].nome
          console.log(nome);
    });

   }]);
最后是我的HTML文件 
<html ng-app="meuApp" lang="pt">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body>
    <div ng-controller="userCtrl">
    <ul>
        <li ng-repeat="usuario in usuarios">
            <a ui-sref="usuarios.detail">{{usuario.nome}}</a>
        </li>
    </ul>
    </div>
</body>

如果我想显示，好的代码是工作的，但我想在每个名称中单击，然后模板显示我的id，名字和这个"人"的姓氏。这就是我的问题。

谢谢大家

这里需要将person对象从一个状态传递到另一个状态。

可以使用ui-router的params属性。当你点击任何特定的人在那个时候，你需要通过id也从一个状态路由到另一个，因为你已经配置在url "/usuarios/{id}"。Ui-router将从params中匹配该属性，并在url.

中设置。

现在您可以成功地将点击对象从一种状态传递到另一种状态。在usuarios.detail状态的控制器中使用ui-router的$stateParams服务获取该对象，以便在uDetail.html中显示

meuApp.config(function($stateProvider, $urlRouterProvider,$stateParams){
    $stateProvider
        .state('usuarios.detail', {
            url: "/usuarios/{id}",
            params: {
              id: null,
              person:null
            },
            templateUrl: 'uDetail.html',
            controller: function($scope, $stateParams) {
              $scope.portfolioId = $stateParams.id;
              $scope.person = $stateParams.person; 
              console.log("State parameters " + JSON.stringify($stateParams));
            }
        });
});

和在你的模板中显示列表。

    <ul>
        <li ng-repeat="usuario in usuarios">
            <a ui-sref="usuarios.detail({ id:usuario.id,person:usuario})">{{usuario.nome}}</a>
        </li>
    </ul>

见上面的代码，我给你参考。

你可以在这个Demo中看到ui-router的详细概念。

为了使代码正常工作，您需要进行一些小的更改，请检查下面的文件:

index . html 

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div ng-controller="userCtrl">
    <ul>
      <li ng-repeat="user in users">
        <a ui-sref="users.detail({id: user.id, user: user})">{{user.name}}</a>
      </li>
    </ul>
  </div>
  <div ui-view></div>
</body>

app.js 

var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider) {
  $stateProvider
    .state('users', {
    abstract: true,
    url: 'users',
    template: '<div ui-view></div>'
  })
  .state('users.detail', {
    url: '/:id',
    templateUrl: 'users.detail.html',
    params: {
      user: null
    },
    controller: function($scope, $stateParams) {
      $scope.user = $stateParams.user;
    }
  });
});
app.controller('userCtrl', ['$scope', '$http',
  function($scope, $http) {
	// replace this with your service call
    $scope.users = [{
      id: 1,
      name: 'john',
      surname: 'doe'
    }, {
      id: 2,
      name: 'mary',
      surname: 'poppins'
    }];
  }
]);

user.detail.html 

<fieldset>
<div>
    <label>id: </label> {{user.id}}
</div>
<div>
    <label>name: </label> {{user.name}}
</div>
<div>
    <label>surname: </label> {{user.surname}}
</div>
</fieldset>

相关文章：