Question

我正试图将我的脑袋环绕着角度，我几天前开始学习，我仍然认识Angular。我一直试图尝试一个简单的json http请求。到目前为止，我已经成功地抓取并显示了数据，我已经在我的控制器中使用基本搜索输入实现了一个指令，并根据它们的值进行了一些选择以进行更多过滤。

但是，我想更简单地过滤结果，只需单击带有月份名称的按钮，然后按日期过滤结果

我的index.html：

<div ng-app="myNetworkEvents">
  <div ng-controller="networkEventsCtrl">
    <networkevent-directive></networkevent-directive>
  </div>
</div>

我的模板：

<ul>
  <li ng-repeat="event in events | filter:search | myFilter:monthlyFilter">
    <p>{{event.title}}</p>
    <p>{{event.date}}</p>
    <p>{{event.tickets}}</p>
    <p>{{event.body}}</p>
  </li>
  <li ng-show="(events | filter:search).length==0">Couldn't find "{{search}}"</li>
</ul>

<!-- my search box -->
<input ng-model="search" type="search">

<!-- filter by month -->
<ul ng-model="monthlyFilter">
  <li><a>January</a></li>
  <li><a>February</a></li>
  <li><a>March</a></li>
</ul>

我的app.js ：

angular.module('myNetworkEvents', ['ui.utils'])

.service('networkEvents', function ($http, $q) {
  var deferred = $q.defer();
  $http.get('url to api').then(function (data){
    deferred.resolve(data);
  });
  this.getNetworkEvents = function (){
    return deferred.promise;
  }
})

.controller('networkEventsCtrl', function ($scope, networkEvents) {
  var getNetworkEvents = networkEvents.getNetworkEvents();
  getNetworkEvents.then(function (eventsData){       
    $scope.events = eventsData.data;
  });
})

.directive('networkeventDirective', function() {
  return {
    restrict: "E",
    templateUrl: "networkevents.html"
  }
})

//this is where i have no idea what to do besides this
.filter('myFilter',['$filter', function($filter){
  return function(list){
    return list;
  }
}])

我的json样子的样本：

{
body: "Some awesomesauce here"
date: "4/3/2015 9:48:04 AM"
id: "207"
isactive: "Yes"
thumbnailurl: ""
tickets: "100"
title: "A nice event"
}

使用Angular按钮单击按月过滤结果

0 个答案: