ATIKON ATIKON - 4 months ago 102
HTML Question

Can't display retrieved data with raw html angularjs

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?

Answer

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>