0

Solicito de su colaboración debido a que no sé como podría relacionar dos listas las cuales tiene en común el id de una de ellas

<table>
<thead>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>E-mail</th>
        <th>Ciudad</th>
    </tr>
</thead>
<tbody>
<tr ng-repeat=" usuario in usuarios track by $index">
    <td>{{usuario.nombre}}</td>
    <td>{{usuario.edad}}</td>
    <td>{{usuario.email}}</td>
    <td>{{usuario.ciudad}}</td> --> No se como obtener esto...?
</tr>       
</tbody>
</table>

Listas:

$scope.usuarios =[{
    "id": 1,
    "nombre": "Juan",
    "edad": 20,
    "email":"juan@gmail.com",
    "idCiudad": 2 
}, {
    "id": 2,
    "nombre": "Pedro",
    "edad": 25,
    "email":"pedro@gmail.com",
    "idCiudad": 1
}];

$scope.ciudades = [{
    "id":1,
    "nombre": "Medellin"
}, {
    "id":2,
    "nombre": "Bogota"
}];

2 respuestas 2

1

Puedes recorrer el arreglo y generar uno nuevo con las dos informaciones mezcladas

angular.module('app', [])
  .controller('ListadoCtrl', function($scope) {
    $scope.usuarios = [{
      "id": 1,
      "nombre": "Juan",
      "edad": 20,
      "email": "juan@gmail.com",
      "idCiudad": 2
    }, {
      "id": 2,
      "nombre": "Pedro",
      "edad": 25,
      "email": "pedro@gmail.com",
      "idCiudad": 1
    }];

    $scope.ciudades = [{
      "id": 1,
      "nombre": "Medellin"
    }, {
      "id": 2,
      "nombre": "Bogota"
    }];

    activate();

    function activate() {
      $scope.usuarios = $scope.usuarios.map(function(usuario) {
        for (var i = 0; i < $scope.ciudades.length; i++) {
          if (usuario.idCiudad === $scope.ciudades[i].id) {
            usuario.ciudad = $scope.ciudades[i];
            break;
          }
        }
        return usuario;
      });
    }

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ListadoCtrl">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>E-mail</th>
      <th>Ciudad</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat=" usuario in usuarios track by $index">
      <td>{{usuario.nombre}}</td>
      <td>{{usuario.edad}}</td>
      <td>{{usuario.email}}</td>
      <td>{{usuario.ciudad.nombre}}</td>
    </tr>
  </tbody>
</table>

O puedes usar filtros de angular

El filtro predefinido filter te puede tomar un arreglo y devolver las coincidencias que sigan determinado patrón. Puedes direccionar el resultado directamente o crear otro filtro que lo haga por ti para que quede más limpio.

angular.module('app', [])
  .controller('ListadoCtrl', function($scope) {
    $scope.usuarios = [{
      "id": 1,
      "nombre": "Juan",
      "edad": 20,
      "email": "juan@gmail.com",
      "idCiudad": 2
    }, {
      "id": 2,
      "nombre": "Pedro",
      "edad": 25,
      "email": "pedro@gmail.com",
      "idCiudad": 1
    }];

    $scope.ciudades = [{
      "id": 1,
      "nombre": "Medellin"
    }, {
      "id": 2,
      "nombre": "Bogota"
    }];

  })
  .filter('ciudad', function() {
    return function(input) {
      return input ? input[0].nombre : null;
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ListadoCtrl">
  <h2>Con filtro customizado</h2>
  <table>
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>E-mail</th>
        <th>Ciudad</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat=" usuario in usuarios track by $index">
        <td>{{usuario.nombre}}</td>
        <td>{{usuario.edad}}</td>
        <td>{{usuario.email}}</td>
        <!-- Usas el filtro para que te muestre solo el nombre -->
        <td>{{ciudades | filter : {id: usuario.idCiudad} | ciudad }}</td>
      </tr>
    </tbody>
  </table>
  <h2>Sin filtro customizado</h2>
  <table>
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>E-mail</th>
        <th>Ciudad</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat=" usuario in usuarios track by $index">
        <td>{{usuario.nombre}}</td>
        <td>{{usuario.edad}}</td>
        <td>{{usuario.email}}</td>
        <!-- Invocas directamente el valor de la propiedad (el resultado es un arreglo) -->
        <td>{{(ciudades | filter : {id: usuario.idCiudad})[0].nombre }}</td>
      </tr>
    </tbody>
  </table>
</div>

1

Usa una funcion en tu controlador que converte idCiudad al nombre de la ciudad.

Por ejemplo:

HTML -

<div ng-controller="Ctrl">
  <table>
  <thead>
      <tr>
          <th>Nombre</th>
          <th>Edad</th>
          <th>E-mail</th>
          <th>Ciudad</th>
      </tr>
  </thead>
  <tbody>
  <tr ng-repeat="usuario in usuarios">
      <td>{{usuario.nombre}}</td>
      <td>{{usuario.edad}}</td>
      <td>{{usuario.email}}</td>
      <td>{{ciudadFunc(usuario.idCiudad)}}</td>
  </tr>       
  </tbody>
  </table>
</div>

JS -

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

function Ctrl($scope) {
    $scope.usuarios =[{
    "id": 1,
    "nombre": "Juan",
    "edad": 20,
    "email":"juan@gmail.com",
    "idCiudad": 2 
    },
    {
    "id": 2,
    "nombre": "Pedro",
    "edad": 25,
    "email":"pedro@gmail.com",
    "idCiudad": 1
    }];

    $scope.ciudades = [{
    "id":1,
    "nombre": "Medellin"
    },
    {
    "id":2,
    "nombre": "Bogota"
    }];

    $scope.ciudadFunc = function ciudadFunc(idCiudad){
        for (var llave = 0; llave < $scope.ciudades.length; llave++){
        if ($scope.ciudades[llave].id == idCiudad){
          return $scope.ciudades[llave].nombre;
        } 
      }
    }
}

Fiddle.

2
  • si lo pense asi, epro queria saber si con angular existe alguna funcion o algo que me pueda hacer esa union, creo que es el unico camino..?
    – Gdaimon
    el 7 sep. 2016 a las 17:52
  • Si, a mi, es el unico camino. No se de una function que hace esa union en Angular. el 7 sep. 2016 a las 18:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.