1

Tengo el siguiente json:

[
    {
      "id":"1",
      "fecha_trama":"2016-02-16",
      "hora_trama":"17:34:48",
      "Nombre":"Evaluación de riesgos",
      "Apellido":"Sala F",
      "Sexo":"10h00-10h30",
      "Residencia":"GESTIÓN DE PROYECTOS"
   },{
     "id":"2",
     "fecha_trama":"2016-02-16",
     "hora_trama":"17:34:49",
     "Nombre":"Metodologia Scrum",
     "Apellido":"sala D",
     "Sexo":"09h30-10h00",
     "Residencia":"GESTIÓN DE PROYECTOS"
   },{
     "id":"3",
     "fecha_trama":"2016-02-16",
     "hora_trama":"23:15:55",
     "Nombre":"Python",
     "Apellido":"aula 132",
     "Sexo":"12h00-12h30",
     "Residencia":"TIC-EC 2015"
  }
];

El cual quiero imprimir cada nombre en un grid. Para ello he encontrado este ejemplo pero me imprime mi estructura de json pero no el nombre. Espero me puedan ayudar gracias

Codigo:

<div ng-controller="MyCtrl">


    <div ng-repeat="i in numbers">
        <div class="row" ng-if="$even">
            <div class="col col-50">{{numbers[$index]}}</div>
            <div class="col col-50">{{numbers[$index + 1]}}</div>
        </div>

    </div>

</div>

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

function MyCtrl($scope) {
    $scope.numbers = [{"id":"1","fecha_trama":"2016-02-16","hora_trama":"17:34:48","Nombre":"Evaluación de riesgos","Apellido":"Sala F","Sexo":"10h00-10h30","Residencia":"GESTIÓN DE PROYECTOS"},{"id":"2","fecha_trama":"2016-02-16","hora_trama":"17:34:49","Nombre":"Metodologia Scrum","Apellido":"sala D","Sexo":"09h30-10h00","Residencia":"GESTIÓN DE PROYECTOS"},{"id":"3","fecha_trama":"2016-02-16","hora_trama":"23:15:55","Nombre":"Python","Apellido":"aula 132","Sexo":"12h00-12h30","Residencia":"TIC-EC 2015"}];
}

Al ejecutar esto me imprime la estructura y yo o que quiero imprimir es lo siguiente:

Evaluación de riesgos Metodologia Scrum Python

2 respuestas 2

2

Si entiendo lo que buscas quizas esto te ayude:

<div data-ng-app ng-controller="MyCtrl">
    <div ng-repeat="i in numbers">
       <div class="row" ng-if="$even">
            <div class="col col-50">{{i.Nombre}}</div>
        </div>
    </div>

</div>

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

Test fiddle


Update:

Advertencia: jaja

Yo no soy un programador Angularjs 1.x.

Es la primera vez que uso Ionic.

Es muy posible que esto se pueda hacer de mejor manera.

Si entiendo bien ahora creo que esto es lo que busca de alguna manera

Evaluación de riesgos | Metodologia Scrum | Python

<body ng-controller="MyCtrl as ctrl">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Test</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row header">
          <div class="col">1 </div>
          <div class="col">2 </div>
          <div class="col">3 </div>
        </div>
      <div class="" ng-repeat="data in ctrl.data">
        <div ng-if="$index % 3 === 0">      
          <div class="row">
            <div class="col">{{ctrl.data[$index].Nombre}}</div>
            <div class="col">{{ctrl.data[$index+1].Nombre}}</div>
            <div class="col">{{ctrl.data[$index+2].Nombre}}</div>
          </div>
        </div>   
      </div>
    </ion-content>
  </body>
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  
  var ctrl = this;
  
  ctrl.data = [{"id":"1","fecha_trama":"2016-02-16","hora_trama":"17:34:48","Nombre":"Evaluación de riesgos","Apellido":"Sala F","Sexo":"10h00-10h30","Residencia":"GESTIÓN DE PROYECTOS"},{"id":"2","fecha_trama":"2016-02-16","hora_trama":"17:34:49","Nombre":"Metodologia Scrum","Apellido":"sala D","Sexo":"09h30-10h00","Residencia":"GESTIÓN DE PROYECTOS"},{"id":"3","fecha_trama":"2016-02-16","hora_trama":"23:15:55","Nombre":"Python","Apellido":"aula 132","Sexo":"12h00-12h30","Residencia":"TIC-EC 2015"}] 
});

Test codepen

Como no me queda muy claro como lo quiere le dejo las dos formas que creo que dice al leer su pregunta y a ver el comentario.

Evaluación de riesgos | Metodologia Scrum

Python

<body ng-controller="MyCtrl as ctrl">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Test</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row header">
          <div class="col">1 </div>
          <div class="col">2 </div>
        </div>
      <div class="" ng-repeat="data in ctrl.data">
        <div ng-if="$index % 2 === 0">      
          <div class="row">
            <div class="col">{{ctrl.data[$index].Nombre}}</div>
            <div class="col">{{ctrl.data[$index+1].Nombre}}</div>
          </div>
        </div>   
      </div>
    </ion-content>
  </body>

Test codepen

3
  • Eso si puedo hacer pero lo que deseo es imprimir en un grid i.Nombre Digamos a la izquierda el nombre del primer dato, a la derecha el del segundo dato, y asi sucesivamente de dos en dos...Lo que tu me has compartido es una lista...eso si puedo Te agradezco mucho por tu tiempo espero me entiendas...
    – Dimoreno
    Commented el 6 abr. 2016 a las 5:14
  • @DiegoIsraelMoreno No entiendo lo que dices de si fuera mas grande tu .json, si tu .json es mas grande pues se distribuira segun lo anterior Commented el 6 abr. 2016 a las 6:17
  • Me referia asi el json tiene mas datos... pero he encontrado un link que me ha servido codepen.io/yrezgui/pen/kJdtu
    – Dimoreno
    Commented el 6 abr. 2016 a las 6:48
0

Empezaré diciendo que tu estructura de datos es un "arreglo" de "objetos".

El ejemplo que usas emplea los índices para imprimir los valores de un arreglo. Esto no es necesario con ng-repeat ya que la variable i contendrá el objeto como tal. numbers[$index] es exatamente igual a i en cada iteración por lo que puedes usar i.propiedad directamente para imprimir lo que quieras en cada fila.

Si tu colección es muy grande (miles de filas) deberías usar la directiva collection-repeat en lugar de ng-repeat. Ambos son idénticos excepto que collection-repeat está optimizado para móviles.

<div ng-controller="MyCtrl">
    <div collection-repeat="i in numbers">
        <div class="row">
            <div class="col col-50">{{i.Nombre}}</div>
        </div>
    </div>
</div>

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

Esto es lo que quieres pero no es muy mobile-friendly. Dices que quieres imprimir tus datos en un grid pero te recomiendo que uses listas ya que en los móviles el ancho de la pantalla es muy variable, tu aplicación puede estarse viendo en un tablet(gran resolución) o en una versión mini de algún móvil (resolución muy pequeña) así que los datos se deben de tratar de organizar verticalmente.

<ion-content ng-controller="MyCtrl">
    <ion-list>
        <ion-item collection-repeat="i in numbers">
            {{i.Nombre}}
        </ion-item>
    </ion-list>
</ion-content>

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

Recuerda usar ion-content en las vistas de tu aplicación para habilitar el scroll. Esto es muy útil cuando se usa en combinación con ion-list

Si quieres puedes poner un grid dentro de cada item y mostrar otros datos horizontalmente pero te repito que no se debe abusar y siempre debes tratar de organizarlos verticalmente para que tus usuarios tengan una mejor experiencia con tu app.

Nota: collection-repeat pertenece a ionic, así que no está disponible en un proyecto de angular puro.

Tu Respuesta

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

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