Menu
EDIT: a jsfiddle showing my code.
http://jsfiddle.net/julianeon/e57HW/4/
I'm trying to preserve line breaks in my JSON so they are displayed in the HTML. I'm also trying to filter the resulting array from the query to display only the first result. I don't know how to 'save' the filtered result and then display it as HTML so br tag shows properly.
<body ng-controller="TextPieces">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
<input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="tags">
<div ng-if=query.length != 0>
<h1>{{(lines|filter:query)[0].content}}</h1>
I tried
<p ng-bind-html-unsafe="(lines|filter:query)[0].content" />
but this didn't work.
Here is the controller JSON:
var snippet = angular.module('snippet', []);
snippet.controller('TextPieces', function ($scope) {
$scope.lines = [
{'title': 'Aesop',
'content': 'The earliest Greek sources <br />, including Aristotle, indicate that Aesop was born in Thrace at a site on the Black Sea coast. <br />The poet Callimachus called him Aesop of Sardis and the later writer Maximus of Tyre called him the sage of Lydia.'},
{'title': 'Bread and Circuses',
'content': 'This phrase originates... (etc.)
1000
I used your JSFiddle to make a Plnkr.co since I think you need to also be loading angular-sanitize.js to fix the break problem
http://plnkr.co/edit/hL5kBXRfod0a0EEzqZUg
HTML
<!DOCTYPE html>
<html ng-app="snippet">
<head>
<script src="http://code.angularjs.org/1.2.9/angular.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<input ng-model="query">
<body ng-controller="TextPieces">
<div ng-if=query.length != 0>
<ul>
<li ng-bind-html="(lines|filter:query)[0].content"></li>
</ul>
</div>
</body>
</html>
JS
var snippet = angular.module('snippet', ["ngSanitize"]);
snippet.controller('TextPieces', function ($scope) {
$scope.lines = [
{'title': 'Breakfast',
'content': 'The earliest Greek sources, including Aristotle, indicate that Aesop was born around 620 BCE in Thrace at a site on the Black Sea coast which would later become the city Mesembria. A number of later writers from the Roman imperial period (including Phaedrus, who adapted the fables into Latin) say that he was born in Phrygia.[2] <br />The 3rd-century poet Callimachus called him Aesop of Sardis,[3] and the later writer Maximus of Tyre called him the sage of Lydia.'},
{'title': 'Bread and Circuses',
'content': 'This phrase originates from Rome in Satire X of the Roman satirist and poet Juvenal (circa A.D. 100). In context, the Latin metaphor panem et circenses (bread and circuses) identifies the only remaining cares of a new Roman populace which cares not for its historical birthright of political involvement. Here Juvenal displays his contempt for the declining heroism of his contemporary Romans.[5] Roman politicians devised a plan in 140 B.C. to win the votes of these new citizens: giving out cheap food and entertainment would be the most effective way to rise to power. … Already long ago, from when we sold our vote to no man, the People have abdicated our duties; for the People who once upon a time handed out military command, high civil office, legions — everything, now restrains itself and anxiously hopes for just two things: bread and circuses.'}
];
});
With regard to storing the first element perhaps a separate key up handler used to trigger a function in the controller is the right way to go. Still mulling that over a bit.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
