加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 在Angular中,我如何获得过滤数组的第一个元素?

发布时间:2020-12-17 17:40:35 所属栏目:安全 来源:网络整理
导读:编辑:一个显示我的代码的jsfiddle. http://jsfiddle.net/julianeon/e57HW/4/ 我正在尝试在我的JSON中保留换行符,以便它们显示在HTML中.我也试图从查询中过滤生成的数组,只显示第一个结果.我不知道如何“保存”过滤后的结果,然后将其显示为HTML,以便正确显示
编辑:一个显示我的代码的jsfiddle.

http://jsfiddle.net/julianeon/e57HW/4/

我正在尝试在我的JSON中保留换行符,以便它们显示在HTML中.我也试图从查询中过滤生成的数组,只显示第一个结果.我不知道如何“保存”过滤后的结果,然后将其显示为HTML,以便正确显示标签.

<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>

我试过了

<p ng-bind-html-unsafe="(lines|filter:query)[0].content" />

但这没用.

这是控制器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.)

解决方法

我使用你的JSFiddle来制作一个Plnkr.co因为我认为你还需要加载angular-sanitize.js来解决中断问题

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,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.'},'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.'}
        ];
});

关于存储第一元素,可能用于触发控制器中的功能的单独的键向上处理器是正确的方法.还在考虑一下.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读