Filter in angular js (ionic framework urlRouter provider)

Question

Filter in angular js (ionic framework urlRouter provider)

Navigation

#1 by (2 votes)

0

I am consuming a web services which returns me a json, What I'm doing is first of all put a list of each object with its content and id, When I click on an item I use parameters by url and I enter it by id, since its value is unique, but I have an error the truth is that it will not be because it does not show me any data.

NOTE: When I consume the json locally if I throw data when entering each object BUT when I consume it the webservice does not show me anything I hope and can guide me in this. Next I share my files

JSON:

[
  {
    "responsable": "SIC",
    "tipo": "TITULACION",
    "guid": "a7c2dd58-eb27-004e-e043-ac10360d004e",
    "nivel": "PREGRADO",
    "modalidad": "PRESENCIAL",
    "componente": {
      "nombre": "METODOLOGIAS AGILES",
      "guid": "2d25d627-6440-0050-e053-ac10360dd136",
      "codigo": "PRE-TNCCO210",
      "subcomponente": {},
      "paralelo": {
        "nombre": "A",
        "guid": "2d2759ee-c7b6-00ce-e053-ac10360d45c9",
        "horario": {
          "docente": {
            "guid": "a7c2dd51-1865-004e-e043-ac10360d004e",
            "identificacion": "0921250601001",
            "nombre": ""
          },
          "registro": {
            "id": 1094,
            "estado": "VALIDADO",
            "contenido": "\u003cp\u003eTema 1.  Fundamentos de las metodologías ágiles\u003cbr /\u003e1.1. Modelos de proceso de desarrollo software\u003cbr /\u003e1.2. El Movimiento ágil\u003cbr /\u003e1.3. Metodologías ágiles de desarrollo\u003cbr /\u003e1.4. Metodologías ágiles versus tradicionales\u003c/p\u003e/nForma de evaluación y características de la materia.",
            "id_contenido_plan": 80989,
            "fecha_clase": "05-04-2016"
          },
          "tipo": "CLASE",
          "parte": "TEORÍA",
          "guid": "2d2759ee-c7b2-00ce-e053-ac10360d45c9",
          "dia": "MARTES",
          "aula": "226",
          "hora_inicio": "07:30:00",
          "hora_fin": "10:00:00"
        }
      }
    }
  },
  {
    "responsable": "SIC",
    "tipo": "TITULACION",
    "guid": "a7c2dd58-eb27-004e-e043-ac10360d004e",
    "nivel": "PREGRADO",
    "modalidad": "PRESENCIAL",
    "componente": {
      "nombre": "METODOLOGIAS AGILES",
      "guid": "2d25d627-6440-0050-e053-ac10360dd136",
      "codigo": "PRE-TNCCO210",
      "subcomponente": {},
      "paralelo": {
        "nombre": "A",
        "guid": "2d2759ee-c7b6-00ce-e053-ac10360d45c9",
        "horario": {
          "docente": {
            "guid": "a7c2dd51-1865-004e-e043-ac10360d004e",
            "identificacion": "0921250601001",
            "nombre": ""
          },
          "registro": {
            "id": 1095,
            "estado": "VALIDADO",
            "contenido": "\u003cp\u003eTema 1.  Fundamentos de las metodologías ágiles\u003cbr /\u003e1.1. Modelos de proceso de desarrollo software\u003cbr /\u003e1.2. El Movimiento ágil\u003cbr /\u003e1.3. Metodologías ágiles de desarrollo\u003cbr /\u003e1.4. Metodologías ágiles versus tradicionales\u003c/p\u003e",
            "id_contenido_plan": 80989,
            "fecha_clase": "12-04-2016"
          },
          "tipo": "CLASE",
          "parte": "TEORÍA",
          "guid": "2d2759ee-c7b2-00ce-e053-ac10360d45c9",
          "dia": "MARTES",
          "aula": "226",
          "hora_inicio": "07:30:00",
          "hora_fin": "10:00:00"
        }
      }
    }
  },
  {
    "responsable": "SIC",
    "tipo": "TITULACION",
    "guid": "a7c2dd58-eb27-004e-e043-ac10360d004e",
    "nivel": "PREGRADO",
    "modalidad": "PRESENCIAL",
    "componente": {
      "nombre": "METODOLOGIAS AGILES",
      "guid": "2d25d627-6440-0050-e053-ac10360dd136",
      "codigo": "PRE-TNCCO210",
      "subcomponente": {},
      "paralelo": {
        "nombre": "A",
        "guid": "2d2759ee-c7b6-00ce-e053-ac10360d45c9",
        "horario": {
          "docente": {
            "guid": "a7c2dd51-1865-004e-e043-ac10360d004e",
            "identificacion": "0921250601001",
            "nombre": ""
          },
          "registro": {
            "id": 4629,
            "estado": "VALIDADO",
            "contenido": "\u003cp\u003eTema 2. Ejemplos de metodologías ágiles\u003c/p\u003e\u003cp\u003e2.1. Scrum\u003cbr /\u003e2.2. Kanban\u003c/p\u003e",
            "id_contenido_plan": 80992,
            "fecha_clase": "19-04-2016"
          },
          "tipo": "CLASE",
          "parte": "TEORÍA",
          "guid": "2d2759ee-c7b2-00ce-e053-ac10360d45c9",
          "dia": "MARTES",
          "aula": "226",
          "hora_inicio": "07:30:00",
          "hora_fin": "10:00:00"
        }
      }
    }
  },
  {
    "responsable": "SIC",
    "tipo": "TITULACION",
    "guid": "a7c2dd58-eb27-004e-e043-ac10360d004e",
    "nivel": "PREGRADO",
    "modalidad": "PRESENCIAL",
    "componente": {
      "nombre": "METODOLOGIAS AGILES",
      "guid": "2d25d627-6440-0050-e053-ac10360dd136",
      "codigo": "PRE-TNCCO210",
      "subcomponente": {},
      "paralelo": {
        "nombre": "A",
        "guid": "2d2759ee-c7b6-00ce-e053-ac10360d45c9",
        "horario": {
          "docente": {
            "guid": "a7c2dd51-1865-004e-e043-ac10360d004e",
            "identificacion": "0921250601001",
            "nombre": ""
          },
          "registro": {
            "id": 6636,
            "estado": "VALIDADO",
            "contenido": "\u003cp\u003eTema 2. Ejemplos de metodologías ágiles\u003c/p\u003e\u003cp\u003e2.1. Scrum\u003cbr /\u003e2.2. Kanban\u003c/p\u003e",
            "id_contenido_plan": 80992,
            "fecha_clase": "26-04-2016"
          },
          "tipo": "CLASE",
          "parte": "TEORÍA",
          "guid": "2d2759ee-c7b2-00ce-e053-ac10360d45c9",
          "dia": "MARTES",
          "aula": "226",
          "hora_inicio": "07:30:00",
          "hora_fin": "10:00:00"
        }
      }
    }
  },
  {
    "responsable": "SIC",
    "tipo": "TITULACION",
    "guid": "a7c2dd58-eb27-004e-e043-ac10360d004e",
    "nivel": "PREGRADO",
    "modalidad": "PRESENCIAL",
    "componente": {
      "nombre": "METODOLOGIAS AGILES",
      "guid": "2d25d627-6440-0050-e053-ac10360dd136",
      "codigo": "PRE-TNCCO210",
      "subcomponente": {},
      "paralelo": {
        "nombre": "A",
        "guid": "2d2759ee-c7b6-00ce-e053-ac10360d45c9",
        "horario": {
          "docente": {
            "guid": "a7c2dd51-1865-004e-e043-ac10360d004e",
            "identificacion": "0921250601001",
            "nombre": ""
          },
          "registro": {
            "id": 6637,
            "estado": "VALIDADO",
            "contenido": "\u003cp\u003e*  Evaluación capítulos 1 y 2.\u003cbr /\u003e\u003cbr /\u003e*  Tema 3. Especificación de requisitos\u003cbr /\u003e    3.1. Concepto y especificación de historias de usuario\u003cbr /\u003e    3.2. Buenas prácticas para la captura de historias de usuario\u003c/p\u003e",
            "id_contenido_plan": 80994,
            "fecha_clase": "03-05-2016"
          },
          "tipo": "CLASE",
          "parte": "TEORÍA",
          "guid": "2d2759ee-c7b2-00ce-e053-ac10360d45c9",
          "dia": "MARTES",
          "aula": "226",
          "hora_inicio": "07:30:00",
          "hora_fin": "10:00:00"
        }
      }
    }
  }
]

APP.js I have the error in the view tabs.ContEdicionTuto

.state('tabs.CompDocente', {
      cache: false,
      url:'/componentes',
      views:{
        'componentes-tab':{
          templateUrl:'templates/CompDocente.html',
          controller:'DocenteCtrl'
        }
      }
    })    
    .state('tabs.ListaTutoDocente', {
      cache: false,
      url:'/componentes/:nom_coe',
      views:{
        'componentes-tab':{
          templateUrl:'templates/ListaTutoDocente.html',
          controller:'DocenteCtrl'
        }
      }
    })
    .state('tabs.CrearTutoria', {
      cache: false,
      url:'/componentes/:nom_coe/:nombre',
      views:{
        'componentes-tab':{
          templateUrl:'templates/CrearTutoria.html',
          controller:'DocenteCtrl'
        }
      }
    })
    .state('tabs.ContEdicionTuto', {
      cache: false,
      url:'/componentes/:Nom_coe/EdicionTutorias/:id',
      views:{
        'componentes-tab':{
          templateUrl:'templates/ContEdicionTuto.html',
          controller:'DocenteCtrl'
        }
      }
    })

Controllers.js

//TRAER REGISTROS CREADOS para ello se llama al MostrarRegistros
    MostrarRegistros.servicioMostrarRegistros($scope.idCe).success(function(data){
      $scope.datosTuto=data;
      $scope.Nom_coe = $scope.nom_coe;
      $scope.id=$state.params.id;
      $scope.cont=$scope.datosTuto.length;// contador que muestra el # de registros creados  
    })
    //FIN TRAER REGISTROS CREADOS

ListTutorDocente.html

<div class="list card">
        <div class="item item-divider" style="text-align:center">
          <i class="ion-ios-compose"></i>
          Tutorías Creadas
        </div>
        <div class="list card" ng-repeat="i in datosTuto | filter:busqueda">
          <a class="item" href="#/Gtuto/componentes/{{Nom_coe}}/EdicionTutorias/{{i.componente.paralelo.horario.registro.id}}">
            <h2><strong>{{i.componente.paralelo.horario.registro.contenido}}</strong></h2>
            <h5>ID: {{i.componente.paralelo.horario.registro.id}}</h5>
          </a>
        </div>
    </div>

ContEdicionTuto.html I show the information of the clicked object

<ion-view  view-title="Resumen de la tutoría creada">
  <ion-content>
    <ion-item type="item-text-wrap" ng-repeat="i in datosTuto |filter: {id:id}">
      <ul class="list">
        <li class="item item-toggle">
            ID:<br>{{i.componente.paralelo.horario.registro.id}}
            <label class="toggle toggle-dark">
              <input type="checkbox" ng-model="editar">
               <div class="track">
                 <div class="handle"></div>
              </div>
            </label>
        </li>
      </ul>     
    </ion-item> 
  </ion-content>
</ion-view>

In this view I do not know why I'm not shown the information I want to repeat when I do it locally if it brings me data but when I use the web service I can show the objects in the list but when I click, it does not show me the information

Thanks in advance

angularjs ionic angular-directivas

asked by Dimoreno 11.05.2016 в 07:30

source

1 answer

Assign "data" attribute to button with jquery Send checkbox as fix in ajax and process it in PHP

score 2 · Answer 1

I'm not entirely sure, but I think your problem is that you're calling the results you want to filter wrong.

In your controller, change the parameter by res (of response) to avoid making a mess, and in $scope.datosTuto access res.data . The service will return a JavaScript object, which if you print by console you will see that inside it has an object called data , which is the one that interests us.

On the other hand, do not use .success() , it is deprecated (Angular 1.5 onwards), instead use .then(); and .catch() , which act as try-catch and help to better debug the code .

MostrarRegistros.servicioMostrarRegistros($scope.idCe)
    .then(
      function(res){
        $scope.datosTuto = res.data;
        $scope.Nom_coe = $scope.nom_coe;
        $scope.id = $state.params.id;
        $scope.cont = $scope.datosTuto.length;
      }
    )
    .catch(
      function(err) {
        console.log(err);
      }
     )

In your view I see the following error: do not use filters in ng-repeat . And instead of using <a href=function>Funcion</a> , use the directive ngClick to access the function that interests you, passing as a parameter to this the ID you need.

I do not see any more mistakes, at least a priori. Good luck!