Remove html tags when doing binding on angularjs

Question

Remove html tags when doing binding on angularjs

Navigation

#1 by (2 votes)

0

I have a json which contains text with html tags. I would like to know how to remove these tags I have been checking that ng-bind-html help, but I really do not know how to implement it. I hope you can help me.

Below I share my files

Json (the data I want to show is content):

[
  {
    "responsable": "SISTEMAS INFORMÁTICOS Y COMPUTACIÓN",
    "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": "FERNANDA MARICELA SOTO GUERRERO"
          },
          "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": "SISTEMAS INFORMÁTICOS Y COMPUTACIÓN",
    "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": "FERNANDA MARICELA SOTO GUERRERO"
          },
          "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"
        }
      }
    }
  }
]

Controller Show Records.serviceShow Records ($ rootScope.idCe) .success (function (data) { $ scope.datosTuto = data; $ scope.cont = $ scope.datosTuto.length; // counter showing the # of records created })

Vista.html

<ion-item class="item item-avatar-center" type="item-text-wrap" ng-repeat="i in datosTuto | filter:busqueda" 
                href="#/Gtuto/componentes/{{Nom_coe}}/EdicionTutorias/{{i.componente.paralelo.horario.registro.id}}">
        <h2>{{i.componente.paralelo.horario.registro.contenido}}</h2>
        <h6>{{i.componente.paralelo.horario.registro.id}}</h6>
        <!--Esto es para borrar un item-->
        <ion-delete-button class="ion-trash-a" ng-click="onItemDelete(i)"></ion-delete-button>
      </ion-item>

When showing content in my app it shows the tags p, br, among others

I thank you in advance for your help.

angularjs angular-directivas

asked by Dimoreno 18.05.2016 в 06:52

source

1 answer

Send checkbox as fix in ajax and process it in PHP HREF JQUERY CYCLE [closed]

score 2 · Accepted Answer

What you want is simple. Include angular-sanitize.js in your code and specify the ngSanitize module as dependency.

If you are using ionic.bundle.js you no longer need to include the file since this is a concatenation of ionic.js , angular.js , angular-animate.js , angular-sanitize.js , angular-ui-router.js and ionic-angular.js .

Finally you just have to put the directive ng-bind-html to make it binding to the part you want show as html What this will do is process your input using the $ sanitize service. If the html that you handle is as simple as in the example that you put there will be no problems.

Here is a demo

angular.module('app', ['ngSanitize', 'ionic'])
  .controller('DatosCtrl', function($scope, sampleData) {
    $scope.datosTuto = sampleData;
  })
  .factory('sampleData', function() {
    return [{
      "responsable": "SISTEMAS INFORMÁTICOS Y COMPUTACIÓN",
      "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": "FERNANDA MARICELA SOTO GUERRERO"
            },
            "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": "SISTEMAS INFORMÁTICOS Y COMPUTACIÓN",
      "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": "FERNANDA MARICELA SOTO GUERRERO"
            },
            "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"
          }
        }
      }
    }];
  });

<script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="DatosCtrl">
  <ion-list>
    <ion-item class="item item-avatar-center" type="item-text-wrap" ng-repeat="i in datosTuto | filter:busqueda" href="#/Gtuto/componentes/{{Nom_coe}}/EdicionTutorias/{{i.componente.paralelo.horario.registro.id}}">
      <h2 ng-bind-html="i.componente.paralelo.horario.registro.contenido"></h2>
      <h6>{{i.componente.paralelo.horario.registro.id}}</h6>
      <!--Esto es para borrar un item-->
      <ion-delete-button class="ion-trash-a" ng-click="onItemDelete(i)"></ion-delete-button>
    </ion-item>
  </ion-list>
</div>

Now if the html you are managing is something more complicated than that and it gives you problems you should use the service $ sce and call the trustAsHtml method as long as you trust the content of what you are trying to show. When I say "trust" I mean that it is not user input or at least controls like this is inserted as it can be a vector for code injection.

This is the demo in case you have to use the $ sce service

angular.module('app', ['ngSanitize', 'ionic'])
  .controller('DatosCtrl', function($scope, sampleData, $sce) {
    for (var i = 0; i < sampleData.length; i++) {
      $sce.trustAsHtml(sampleData[i].componente.paralelo.horario.registro.contenido);
    }
    $scope.datosTuto = sampleData;
  })
  .factory('sampleData', function() {
    return [{
      "responsable": "SISTEMAS INFORMÁTICOS Y COMPUTACIÓN",
      "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": "FERNANDA MARICELA SOTO GUERRERO"
            },
            "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": "SISTEMAS INFORMÁTICOS Y COMPUTACIÓN",
      "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": "FERNANDA MARICELA SOTO GUERRERO"
            },
            "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"
          }
        }
      }
    }];
  });

<script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="DatosCtrl">
  <ion-list>
    <ion-item class="item item-avatar-center" type="item-text-wrap" ng-repeat="i in datosTuto | filter:busqueda" href="#/Gtuto/componentes/{{Nom_coe}}/EdicionTutorias/{{i.componente.paralelo.horario.registro.id}}">
      <h2 ng-bind-html="i.componente.paralelo.horario.registro.contenido"></h2>
      <h6>{{i.componente.paralelo.horario.registro.id}}</h6>
      <!--Esto es para borrar un item-->
      <ion-delete-button class="ion-trash-a" ng-click="onItemDelete(i)"></ion-delete-button>
    </ion-item>
  </ion-list>
</div>

Basically you have a lot of html content so you have to iterate and tell angular to trust each of those html entries.