Печатать json в угловом grid js (ionic framework)

У меня есть следующий 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"
  }
];

Который я хочу напечатать каждое имя в grid. Для этого я нашел этот пример, но меня печатает моя структура json но не имя. Я надеюсь, что они могут помогать мне спасибо

Код:

<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"}];
}

Выполнив это печатает меня структура и я, или который я хочу напечатать, является следующим:

Оценка риска Методология Скрум Пайтон

1
задан 06.04.2016, 15:43
2 ответа

Если я понимаю, что ты ищешь, может быть, это, я помог тебе:

<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',[]);

Тест fiddle


Update:

Предупреждение: jaja

Я не программист Ангулархс 1.x.

- первый раз, что я использую Ionic.

очень возможно, что это может делаться из лучшего способа.

, Если я понимаю довольно сейчас , я думаю, что это - то, что ищет каким-то образом

EvaluaciГіn риска | Методология Scrum | Пайтон

<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"}] 
});

Тест codepen

, Поскольку он у меня не остается очень ясным, как он это хочет, оставил ему две формы, что я думаю, что он говорит, прочитав Ваш вопрос, и чтобы увидев комментарий.

EvaluaciГіn риска | Методология Scrum

Пайтон

<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>

Тест codepen

2
ответ дан 24.11.2019, 14:38
  • 1
    Конечно я могу делать, но то, что я желаю, он состоит в том, чтобы печатать в grid i. Имя Давайте Говорить в левую сторону имя первой информации, в правую сторону тот второй информации, и я схватил последовательно двух в двух... Что ты имел меня, это список... конечно я могу Тебе благодарен много за твое время надеюсь, что ты понимаешь меня... – Dimoreno 06.04.2016, 08:14
  • 2
    @DiegoIsraelMoreno я не понимаю того, что ты говоришь о, если был больше твой .json, если твой .json больше, так как он будет распространен согласно предыдущему – Angel Angel 06.04.2016, 09:17
  • 3
    Я относился так у json есть больше данных..., но я нашел соединение, которое подало мне codepen.io/yrezgui/pen/kJdtu – Dimoreno 06.04.2016, 09:48

Я начну тем, что буду говорить, что твоя структура данных - "договоренность" "объектов".

Пример, который ты используешь, использует индексы, чтобы печатать стоимость договоренности. Это не необходимо с ng-repeat так как переменная i он будет содержать как таковой объект. numbers[$index] он exatamente равно в i в каждом повторении а следовательно ты можешь использовать i.propiedad прямо чтобы печатать то, что ты хочешь в каждой линии.

Если твоя коллекция очень большая (тысячи линий), ты был бы должен использовать директивный орган collection-repeat вместо ng-repeat. Оба идентичны если только collection-repeat будь оптимизирован для мобильных телефонов.

<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',[]);

Это то, что ты хочешь, но он не очень mobile-friendly. Ты говоришь, что ты хочешь напечатать твои данные в grid, но я рекомендую тебе использовать списки, так как в мобильных телефонах ширина экрана очень изменчивая, твое приложение может видеть в tablet (большое разрешение) или в версии мини какого-то мобильного телефона (очень маленькое разрешение), так что данные, должно быть, стараются организовывать вертикально.

<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',[]);

Помни что используй ion-content в совещаниях твоего приложения, чтобы давать возможность scroll. Это очень полезное, когда он используется в сочетании с ion-list

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

Замечание: collection-repeat принадлежи в ionic, так что он не доступен в проекте угловой сигары.

0
ответ дан 24.11.2019, 14:38