Can't display retrieved data with raw html angularjs

Question

i'm trying to display retrieved content by ajax in raw html. Here's my code in one file:

 <html ng-app="fetch">
<head>
<title>Вывод с базы</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
</head>

<body>
<br>
  <div class="row">
    <div class="container">
      <h1>С базы вывод</h1>
      <div ng-controller="dbCtrl">
      <input type="text" ng-model="searchFilter" class="form-control">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>News title</th>
                    <th>News description</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="news in data | filter:searchFilter">
                    <td>{{news.title}}</td>
                    <td ng-bind-html='data'>{{news.description}}</td>
                </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

<script>
    angular.module('fetch', ['ngSanitize']).controller('dbCtrl', ['$scope', '$http', function ($scope, $http) {
        $http.get("/ajax.php")
            .success(function(data){
                $scope.data = data;
            })
            .error(function() {
                $scope.data = "error in fetching data";
            });
    }]);
</script>

</html>

But output of <td ng-bind-html='data'>{{news.description}}</td> this part not accept html tags. Output is: [Object, object] and etc.

Here's my ajax.php

<?php
 //database settings
$conn=new mysqli("1", "1", "1", "1");
                // Check connection
                if ($conn->connect_error) {
                    die("Connection failed: " . $conn->connect_error);
                }
mysqli_query($conn, "SET NAMES utf8mb4");

    $result = mysqli_query($conn, "select * from rss where          source='tengrinews.kz' limit 20");

 $data = array();

    while ($row = mysqli_fetch_array($result)) {
      $data[] = $row;
      }
      echo json_encode($data);
      ?>

I've add the angular-sanitize and ngSanitize to my module, what is the problem?

Your actual data will be in .data field. Change the assignment of your data to the scope variable to $scope.data = data.data; — Chinni
– Chinni, Commented Jul 11, 2016 at 21:18
@Chinni no, it doesn't work. Title doesn't have any html tags and easily displayed and my description too, but description shows with html tags. If i delete the ng-bind-html attribute/ — ATIKON
– ATIKON, Commented Jul 11, 2016 at 21:24
First, this -> <td ng-bind-html='data'>{{news.description}}</td> is incorrect, or you use ng-bind-html or you use interpolation, which property has html tags? The description? — developer033
– developer033, Commented Jul 11, 2016 at 21:25
So just change to <td ng-bind-html="news.description"></td> — developer033
– developer033, Commented Jul 11, 2016 at 21:30

developer033 · Accepted Answer · 2016-07-11 21:39:36Z

2

You can't use ng-bind-html and interpolation {{}} together.

So if you want to show the description, you should change

this:

<td ng-bind-html='data'>{{news.description}}</td>

for:

<td ng-bind-html="news.description"></td>

Note: If you want to display the object data, you must use JSON filter(otherwise it'll be rendered as [object Object]) and create a new cell <td> to display it:

<td ng-bind="data | json"></td>

edited Jul 11, 2016 at 21:39

answered Jul 11, 2016 at 21:33

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't display retrieved data with raw html angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related