简单的AngularJS搜索

时间:2014-01-17 02:44:56

标签: javascript json angularjs

当我使用$ .get从外部json文件中检索数据创建一个简单的AngularJS搜索控制器时,我想知道我的代码有什么问题。看起来我拥有所有正确的数据。 JSfiddle在这里:http://jsfiddle.net/jmccommas/MLzF7/

控制器:

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

 personApp.controller('PersonListCtrl', function ($scope, $http) {
   $http.get('data/persons.json').success(function(data) {
    $scope.persons = data;
    });

});

HTML:

     <div ng-controller="PersonListCtrl">
           <div class="bar">
                       Search: <input ng-model="query">
                   </div>
                   <ul class="">
                       <li ng-repeat="person in persons | filter:query">
                           {{persons.name}}

                       </li>
                   </ul>
       </div>

JSON:

[
{
    "name": "John Doe"
},
{
    "name": "Mike Doe"
},
{
    "name": "Sam Doe"
},
{
    "name": "Jerry Doe"
},
{
    "name": "Paul Doe"
},
{
    "name": "Peter Doe"
},
{
    "name": "Fred Doe"
},
{
    "name": "Ralph Doe"
},
{
    "name": "Mike Doe"
},
{
    "name": "John Doe"
}

1 个答案:

答案 0 :(得分:4)

有三件小事出错了(至少在JS小提琴中) 1.您已将JS设置为加载DOM Ready。将其更改为无包装。 2.在ng-repeat中,你有persons.name。它应该是person.name。当你正在通过人时,你正在找人。 3.小提琴中的JSON不存在。所以在我自己的小提琴中,我现在已经硬编码了对象

http://jsfiddle.net/amitavroy/rCrGP/

将您的李改为以下

<li ng-repeat="person in persons | filter:query">{{person.name}}</li>