Попытка поиска JSON и отображения соответствующих результатов на экране с использованием grunt и angularJS

Question

Я пытаюсь выполнить поиск через JSON, который я загружаю в переменную с помощью angularJS с хрюканьем. У меня было приложение с Йоменом. Я уже делал этот поиск без сервера, но теперь, когда я пытаюсь использовать сервер, для меня это не сработает. У меня нет ошибок в 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,

From

<div ng-app="myApp"> 

To

<div ng-app="fourthgruntApp"> 

Кроме того, ваш модуль должен иметь пустые зависимости впрыскивается

angular.module('fourthgruntApp',[]) 

Также т ака ваш DIV, который имеет ng-controller общих для ng-repeat и input поиска

<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