用离子和json搜索列表

时间:2015-03-19 18:04:51

标签: json angularjs ionic

我是angularJs + ionic的新手,我需要在我的加载外部JSON文件的选项列表中创建一个Search函数。 我在我的模板中得到了这个:

     <ion-view view-title="Citys">
       <ion-content>
          <ion-list>
            <ion-item class="item item-thumbnail-left" ng-repeat="friend in friends" href="#/sps/restaurante/{{friend.id}}">
              <img ng-src="{{friend.thumbnail}}">
              <h2>{{friend.name}}</h2>
              <p>{{friend.category}}</p>
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-view>

在我的app.js文件中也有这个

.state('sps.restaurantes', {
      url: "/restaurantes",
      views: {
        'rest-tab-sps': {
          templateUrl: "templates/sps-restaurantes.html",
          controller: 'FriendsCtrl',
          resolve: {
            allfriends: function(Friends) {
              return Friends.all(); }
          }
        }
      }
    })
    .state('sps.restaurante-detail', {
      url: '/restaurante/:friendId',
      views: {
        'rest-tab-sps': {
          templateUrl: 'templates/sps-rest-detail.html',
          controller: 'FriendDetailCtrl'
        }
      }
    })

在我的controllers.js文件中有这个:

App.controller('FriendsCtrl', function($scope, allfriends) {
  $scope.friends = allfriends;
})
App.controller('FriendDetailCtrl', function($scope, $stateParams,$cordovaDialogs,$ionicSideMenuDelegate, Friends) {
  $ionicSideMenuDelegate.canDragContent(false)
  $scope.friend = Friends.get($stateParams.friendId);
   
}) // Close Controller

最后我在我的services.js文件中有这个:

App.factory('Friends', function($http, $q) {
var friends = [];
  return {
    all: function(){
      var dfd = $q.defer();
      $http.get("js/sps-rest.json").then(function(response){
        friends = response.data;
        console.log(friends);
        dfd.resolve(friends);
      });
      return dfd.promise;
    },
    get: function(friendId) {
       for (var i = 0; i < friends.length; i++) {
        if (friends[i].id === parseInt(friendId)) {
          return friends[i];
        }
      }
      return null;
    }
  }
});

这是我的外部JSON文件:

[
     {
       "id": 0,
       "name":"Restaurant 1",
       "thumbnail":"http://yanupla.com/apps/turismo/json/sps/rest/fogoncito.jpg",
       "category":"Comida Mexicana, Restaurante, Bar, Shows Nocturnos",
       "address":"1ra calle entre 15 y 16 ave, Barrio Suyapa, Blvrd Morazán",
       "phone":"2550-1289, 2550-1403",
       "website":"",
       "schedule":"",
       "bio":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam efficitur leo, at posuere lacus fringilla eu. In pellentesque neque eget justo vulputate, quis imperdiet magna egestas. Suspendisse at tincidunt elit, a ornare risus. Cras ut elit egestas, blandit tellus quis, consectetur neque. Aliquam ullamcorper, metus vel ultrices facilisis, lorem orci suscipit massa, vitae rutrum urna ante vel dui." 
     },
     {
       "id": 1,
       "name":"Restaurant 2",
       "thumbnail":"http://yanupla.com/apps/turismo/json/sps/rest/cebollines.jpg",
       "category":"Comida Mexicana, Restaurante, Bar",
       "address":"1ra calle entre 15 y 16 ave, Barrio Suyapa, Blvrd Morazán",
       "phone":"2550-1289, 2550-1403",
       "website":"http://www.cebollines.com",
       "schedule":"Lun- Jue: 7:00-23:00 | Vier-Sab: 7:00-24:00 | Dom: 7:00-22:00",
       "bio":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam efficitur leo, at posuere lacus fringilla eu. In pellentesque neque eget justo vulputate, quis imperdiet magna egestas. Suspendisse at tincidunt elit, a ornare risus. Cras ut elit egestas, blandit tellus quis, consectetur neque. Aliquam ullamcorper, metus vel ultrices facilisis, lorem orci suscipit massa, vitae rutrum urna ante vel dui." 
     }
]

我需要的是当我在模板列表顶部输入搜索选项时可以调用的函数。

0 个答案:

没有答案