个人中心
gpt4 book ai didi

javascript - 使用 Angular 搜索 JSON

转载 作者：行者123 更新时间：2023-12-02 14:30:36 25 4
gpt4 key购买 nike

我正在尝试使用 Angular 搜索 JSON。我在网上找到了一些关于如何执行此操作的教程，但我现在陷入困境，无法知道我的问题是什么。我尝试过在 Chrome 中使用调试器，它似乎完全遍历了 JS，但没有显示任何内容。

我是一个初学者，如果有一些明显的错误，请原谅我。

这是我的代码

HTML:

<!DOCTYPE html>
<!doctype html>
<html ng-app="spellSearch">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="spellSearch.js"></script>
  </head>
  <body>
    <div ng-controller="spellSearchCtrl">
      <label>Name:</label>
      <input type="text" ng-model="searchString" placeholder="Enter any spell information">
        <ul ng-repeat="i in jsonSpellData | filter:searchString">
          <li>
          Name: {{i.name}} <br>
          Description: {{i.desc}} <br>
          Page Number: {{i.page}} <br>
          Range: {{i.range}} <br>
          Components: {{i.components}} <br>
          Material: {{i.material}} <br>
          Ritual: {{i.ritual}} <br>
          Duration: {{i.duration}} <br>
          Concentration: {{i.concentration}} <br>
          Casting Time: {{i.casting_time}} <br>
          Level: {{i.level}} <br>
          School: {{i.school}} <br>
          Class: {{i.class}}
        </li>
        </ul>
    </div>
  </body>
</html>

JavaScript

var app = angular.module('spellSearch', []);

app.controller('spellSearchCtrl', function($scope, $http){
    $http.get('spells.json').success(function(data, status, headers, config){
        $scope.items = data.data;
    }).error(function(data, status, headers, config){
        console.log("No data found...");
    });
});

app.filter('searchFor', function(){
    return function(arr, searchString){
        if(!searchString){
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(item){
            if(item.name.toLowerCase().indexOf(searchString) !== -1){
                result.push(item);
            }
            else {
                result.push("No results.");
            }
        });
        return result;
    };
});

JSON 的一部分

var jsonSpellData = [
  {
    "name":"Abi-Dalzim's Horrid Wilting",
    "desc":"<p>You draw the moisture from every creature in a 30-foot cube centered on a point you choose within range. Each creature in that area must make a Constitution saving throw. Constructs and undead aren't affected, and plants and water elementals make this saving throw with disadvantage. A creature takes 10d8 necrotic damage on a failed save, or half as much damage on a successful one.You hurl a bubble of acid. Choose one creature within range, or choose two creatures within range that are within 5 feet of each other. A target must succeed on a Dexterity saving throw or take 1d6 acid damage.</p><p>This spells damage increases by 1d6 when you reach 5th Level (2d6), 11th level (3d6) and 17th level (4d6).</p>",
    "page":"ee pc 15",
    "range":"150 feet",
    "components":"V, S, M",
    "material":"A bit of sponge.",
    "ritual":"no",
    "duration":"Instantaneous",
    "concentration":"no",
    "casting_time":"1 action",
    "level":"8th-level",
    "school":"Necromancy",
    "class":"Sorcerer, Wizard"
  },
  {
    "name":"Absorb Elements",
    "desc":"<p>The spell captures some of the incoming energy, lessening its effect on you and storing it for your next melee attack. You have resistance to the triggering damage type until the start of your next turn. Also, the first time you hit with a melee attack on your next turn, the target takes an extra 1d6 damage of the triggering type, and the spell ends.</p>",
    "higher_level":"<p>When you cast this spell using a spell slot of 2nd level or higher, the extra damage increases by 1d6 for each slot level above 1st.</p>",
    "page":"ee pc 15",
    "range":"Self",
    "components":"S",
    "ritual":"no",
    "duration":"1 round",
    "concentration":"no",
    "casting_time":"1 action",
    "level":"1st-level",
    "school":"Abjuration",
    "class":"Druid, Ranger, Wizard"
  }
];

最佳答案

您可以直接在 ng-repeat 内部过滤数据。只需完全删除您的自定义过滤器即可。

您还可以添加 ng-if="searchString"，以便仅显示过滤后的拼写。

  <input type="text" ng-model="searchString" placeholder="Enter any spell information">
    <ul ng-if="searchString" ng-repeat="i in spell.jsonSpellData | filter:searchString">
      <li>
        Name: {{i.name}}
      </li>
    </ul>

function spellSearchCtrl() {
  this.jsonSpellData = [ { "name":"Abi-Dalzim's Horrid Wilting" }, { "name":"Absorb Elements" } ];
}
angular.module('myApp', []);
angular
    .module('myApp')
    .controller('spellSearchCtrl', spellSearchCtrl);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="spellSearchCtrl as spell">
      <label>Name:</label>
      <input type="text" ng-model="searchString" placeholder="Enter any spell information">
        <ul ng-if="searchString" ng-repeat="i in spell.jsonSpellData | filter:searchString">
          <li>
            Name: {{i.name}}
          </li>
        </ul>
    </div>
</div>

关于javascript - 使用 Angular 搜索 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37868366/

25 4 0
文章推荐： javascript - ng-view 在 Angular 中不起作用
文章推荐： git - 尽管身份验证成功，但无法克隆 repo
文章推荐： grails - Grails db-migration dbm-db-doc脚本失败
文章推荐： Javascript，按顺序比较两个数组，同时跳过不匹配的索引
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com