尝试使用 grunt 和 angularJS 搜索 JSON 并将匹配结果显示到屏幕上

Question

我正在尝试搜索使用带有 grunt 的 angularJS 加载到变量中的 JSON。我用 Yeoman 设置了我的应用程序。我以前在没有服务器的情况下进行过这种类型的搜索，但现在我正在尝试使用服务器，它在这里对我不起作用。我没有从 Chrome 中收到任何错误，但是当我输入文本条目时，没有返回任何内容。我在这里做错了什么？

这是我的看法：

<div ng-app="myApp">
  <div ng-controller="DatabaseCtrl as result">
    <input type="text" ng-model="searchString">
  </div>
  <ul ng-if="searchString" ng-repeat="i in result.json | filter:searchString">
    <li>
      <b>{{i.name}}</b> <br><br>
      Realm: {{i.realm}} <br>
      Description: {{i.description}} <br>
    </li>
  </ul>
</div>

这是我的控制器：

'use strict';

/**
 * @ngdoc function
 * @name fourthgruntApp.controller:DatabaseCtrl
 * @description
 * # DatabaseCtrl
 * Controller of the fourthgruntApp
 */
angular.module('fourthgruntApp')
  .controller('DatabaseCtrl', function () {

    this.json = [
            {
                "name": "Temple of Snow",
                "dungeontype": "Temple",
                "alignment": "Neutral Good",
                "size": "Small",
                "agedescriptor": "Millenniums Old",
                "hex": "00000",
                "realm": "Ernst Chase",
                "description": "Temple to the god of Snow. These ancient temples were built long ago by the explorers of the Far Wield when they made their towns and villages. Followers of the gods make pilgrimages to these temples throughout the year."
            },
            {
                "name": "Temple of Memory",
                "dungeontype": "Temple",
                "alignment": "Neutral Good",
                "size": "Meduim",
                "agedescriptor": "Millenniums Old",
                "hex": "08000",
                "realm": "Ernst Chase",
                "description": "Temple to the god of Memory. These ancient temples were built long ago by the explorers of the Far Weald when they made their towns and villages. Followers of the gods make pilgrimages to these temples throughout the year. Upon entering the temple, it's said that one can recall information previously thought to be lost. With enough meditation, some priests of Memory have claimed to be able to tap into the memory of others while in the temple."
            },
            {
                "name": "Temple of Sky",
                "dungeontype": "Temple",
                "alignment": "Neutral Good",
                "size": "Diminutive",
                "agedescriptor": "Millenniums Old",
                "hex": "20000",
                "realm": "Karmswald",
                "description": "Temple to the god of Sky. These ancient temples were built long ago by the explorers of the Far Weald when they made their towns and villages. Followers of the gods make pilgrimages to these temples throughout the year. ",
                "notes": "1. There is a rock near the altar with an engraving that reads “Bow before the holder of the blessed sun, kneel in the glory of the clouds that are carried in it’s arms.”  2. If you commune with the altar here you gain 10 ft of movement speed for 2 days.\n"
            }
        ]
  });

Answer 1

在 html 中更改您的 ng-app，

From

<div ng-app="myApp">

To

<div ng-app="fourthgruntApp">

你的模块也应该注入空依赖项

angular.module('fourthgruntApp',[])

还可以使用 ng-controller 和 ng-repeat 和 input 通用的 div

 <div ng-controller="DatabaseCtrl as result">
    <input type="text" ng-model="searchString">
    <ul ng-repeat="i in result.json | filter:searchString">
      <li>
        <b>{{i.name}}</b>
        <br>
        <br> Realm: {{i.realm}}
        <br> Description: {{i.description}}
        <br>
      </li>
    </ul>
  </div>

DEMO