UI-роутер для списка предметов Angularjs

Question

UI-роутер для списка предметов Angularjs

0

Я столкнулся с некоторыми проблемами с моим простым кодом (исследование), мне действительно нужна помощь, чтобы исправить это.

Прежде всего, у меня есть 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 с идентификатором, именем и фамилией

Также у меня есть 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>

Если я хочу показать, нормально, код работает, но я хочу щелкнуть по каждому имени, а затем шаблон показывает мне идентификатор, имя и фамилию этого "человека". Это моя проблема.

Спасибо вам, ребята.

C. Villa 19 сен. 2015, в 04:07

Источник

Теги:

javascript

angularjs

json

angular-ui-router

angularjs-ng-repeat

2 ответа

1

Здесь вам нужно передать объект человека из одного состояния в другое.

Для этого вы можете использовать атрибут params ui-router. Когда вы нажимаете на какого-либо персонифицированного лица, вам необходимо также передавать идентификатор при маршрутизации из одного состояния в другое, поскольку вы уже настроили URL-адрес "/usuarios/{id}". ui-router будет соответствовать этому свойству из параметров и будет установлен в URL-адресе.

Теперь вы можете успешно передать кликнутый объект из одного состояния в другое. Получите этот объект с $stateParams службы $stateParams ui-router в контроллере usuarios.detail чтобы вы могли отображать в 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>

См. Выше код, который я дал для вашей справки.

Вы можете увидеть эту демонстрацию для детальной идеи ui-router.

Satyam Koyani 18 сен. 2015, в 23:57

Ещё вопросы

Romulo · Accepted Answer · 2015-09-19T01-57-00.000Z

Для того, чтобы заставить ваш код работать, вам нужны небольшие изменения, проверьте приведенные ниже файлы:

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>

Отлично работает с моим бэкэндом, спасибо Ромуло