AngularJS - Displays html tags, how to make it readable

393 views Asked by At

i am using PHP as Modal, and Angularjs as Controller, and to display in front end, I am converting PHP into JSON. It displays like as below shown in Front End. I want to display a readable one with li tag and break tag and other texts only. I don't want any other html tags in front end. Please help.

Front End:

enter image description here

JSON Code:

enter image description here

PHP Code:

elseif (isset($_GET['product_id']) && $_GET['product_id'] == 'getProduct') {
    $data = array();

    while ($product = mysqli_fetch_array($query2, MYSQLI_ASSOC)) {

        $name = str_replace('"', "", $product['product_name']);
        $description = str_replace('"', "", $product['product_description']);
        $category_name = str_replace('"', "", $product['category_name']);

        $pro = array('id' => $product['product_id'], 'name' => utf8_encode($name), 'description' => utf8_encode($description),
            'price' => utf8_encode($product['product_price']), 'weight' => $product['product_weight'], 'weight_class' => $product['product_weight_class'], 'quantity' => $product['quantity'],
            'link' => $product['product_image_url'], 'cat' => utf8_encode($category_name));
        array_push($data, $pro);

    }

    $product_encode = json_encode($data);
    //$product_encode = htmlspecialchars_decode($product_encode);
    //$product_encode = html_entity_decode($product_encode);

    echo strip_tags($product_encode);
}

Controller Angular:

   $http.get("https://example.com/store/www/api.php?product_id=getProduct")
                    .success(function (detail) {
                        $scope.details = detail;

                        var url = window.location.href;
//$scope.categoryId = '20';
                        var final = url.substr(url.lastIndexOf('/'));
                        $scope.productId = final.split("=")[1];


                        console.log($scope.details);
                    });

View:

enter image description here

2

There are 2 answers

1
Disha On

try using pre tag - you can test here - fiddle

<pre> {{product.description}} </pre>
3
developer On

Use angular ng-sanitize to format html page on view. Refer below link for example. Tell me if it help you or not.

https://docs.angularjs.org/api/ngSanitize/service/$sanitize