5

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.)
6
  • 1
    Don't think this is necessarily a good use case for a filter you should probably just call a function on your controller to process the data (if you'd like you can inject your filter into the controller to avoid repeating that code) Mar 14, 2014 at 20:41
  • OK, that sounds good. How would I go about doing this?
    – jumar
    Mar 14, 2014 at 20:55
  • If you build a plnkr.co or jsfiddle.net to show the current code you have as close to working as you can get it I'll tweak it to work how I would expect. Mar 14, 2014 at 21:01
  • jsfiddle.net/julianeon/e57HW/4
    – jumar
    Mar 14, 2014 at 23:06
  • Thanks for your suggesting this; from now on, I'll do this.
    – jumar
    Mar 14, 2014 at 23:06

1 Answer 1

7

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.

2
  • Thanks! (Confirmed that it works). This makes a huge difference for me, the difference between presenting my project and not. I really appreciate it.
    – jumar
    Mar 14, 2014 at 23:53
  • 1
    No problem thanks for the confirmation that ultimately this worked out too glad to hear you were able to deliver. Mar 15, 2014 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.