Filtering months in angular JS

Question

I have the following Array which is linked to a dropdownlist

$scope.Months =
    [
        {
            Name: "Month",
            Value: undefined
        },

        {
            Name: "Jan",
            Value: 1
        },

        {
            Name: "Feb",
            Value: 2
        },

        {
            Name: "Mar",
            Value: 3
        },

        {
            Name: "Apr",
            Value: 4
        },

        {
            Name: "May",
            Value: 5
        },

        {
            Name: "Jun",
            Value: 6
        },

        {
            Name: "Jul",
            Value: 7
        },

        {
            Name: "Aug",
            Value: 8
        },

        {
            Name: "Sep",
            Value: 9
        },

        {
            Name: "Oct",
            Value: 10
        },

        {
            Name: "Nov",
            Value: 11
        },

        {
            Name: "Dec",
            Value: 12
        }
    ];

Then I receive an array of data:

$scope.Data = 
[
{
Name: "Example Jan", 
Month: 1
},
{
Name: "Example Jan2", 
Month: 1
},
{
Name: "Example Feb", 
Month: 2
},
{
Name: "Example Feb2", 
Month: 2
},
{
Name: "Example Nov", 
Month: 11
},
{
Name: "Example Nov2", 
Month: 11
}
]

The thing here is that whenever you select a Month in the DDL, it should only display the DATA to which the month belongs... For instance... Select November, it should display all Data which the Value of Month equals 11...

But I noticed that when you select January for example, it will display all Data that contains 1 in it's value.. in this case, 1 and 11.

Considering it's an int instead of a string, is there a work around this?

UPDATE: This is my HTML

<table class="submitted-requests sortableTable">
                    <thead>
                        <tr>
                            <th ng-click="Sort('Supervisor.Name')">
                                <span>
                                    Supervisor
                                </span>

                                <span class="glyphicon sort-icon" ng-show="SortKey=='Supervisor.Name'" ng-class="{'glyphicon-chevron-up':Reverse, 'glyphicon-chevron-down':!Reverse}">
                                </span>
                            </th>

                            <th ng-click="Sort('ObservationDateString')">
                                <span>
                                    Observation Date
                                </span>

                                <span class="glyphicon sort-icon" ng-show="SortKey=='ObservationDateString'" ng-class="{'glyphicon-chevron-up':Reverse, 'glyphicon-chevron-down':!Reverse}">
                                </span>
                            </th>
                        </tr>

                        <tr>
                            <th>
                                <input type="text" class="filter" maxlength="50" ng-model="SearchTerm.Supervisor.Name" />
                            </th>

                            <th>
                                <select class="filter" ng-options="month.Value as month.Name for month in Months track by month.Value" ng-model="SearchTerm.ObservationMonth"></select>

                                <select class="filter" ng-model="SearchTerm.ObservationYear">
                                    <option ng-repeat="year in Years | orderBy: 'year.Value'" value="{{year.Value}}">
                                        {{year.Name}}
                                    </option>
                                </select>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr dir-paginate="record in Records | filter:SearchTerm | itemsPerPage:PageSize" pagination-id="recordPaging">
                            <td>
                                {{record.Supervisor.Name}}
                            </td>

                            <td>
                                {{record.ObservationDateString}}
                            </td>
                        </tr>
                    </tbody>
                </table>

                <dir-pagination-controls pagination-id="recordPaging" max-size="10" direction-links="true" boundary-links="true">
                </dir-pagination-controls>

and aditional data:

$scope.Records = 
[
    {
        Supervisor: 
        {
            Name: "Julio"
        }, 
        ObservationDateString: "01/14/2015",
        ObservationDateMonth: 1,
        ObservationDateYear: 2015
    },
    {
        Supervisor: 
        {
            Name: "Julio"
        }, 
        ObservationDateString: "02/16/2015",
        ObservationDateMonth: 2,
        ObservationDateYear: 2015
    },
    {
        Supervisor: 
        {
            Name: "Gaspar"
        }, 
        ObservationDateString: "11/11/2015",
        ObservationDateMonth: 11,
        ObservationDateYear: 2015
    },
    {
        Supervisor: 
        {
            Name: "Erik"
        }, 
        ObservationDateString: "12/05/2014",
        ObservationDateMonth: 12,
        ObservationDateYear: 2014
    },
]

$scope.Year =
[
    {
        Name: "Year",
        Value: undefined
    },

    {
        Name: "2014",
        Value: 2015
    },

    {
        Name: "2014",
        Value: 2015
    },

    {
        Name: "2016",
        Value: 2016
    }
];

Can we see your HTML markup?

Brant
– Brant

2015-11-17 19:47:07 +00:00
Commented Nov 17, 2015 at 19:47 — Brant
– Brant, Commented Nov 17, 2015 at 19:47
done... I updated the post

Victor
– Victor

2015-11-17 21:46:47 +00:00
Commented Nov 17, 2015 at 21:46 — Victor
– Victor, Commented Nov 17, 2015 at 21:46

JstnPwll · Accepted Answer · 2015-11-18 16:37:21Z

4

You need to define a custom filter function, and use it when you call your filter. Something like this:

JS

app.controller('MainCtrl', function($scope) {
  $scope.currentMonth = 1;
  $scope.Data = [];

  $scope.monthMatch = function(month) {
    return function(item) {
      return item.Month == month;
    };
  };
});

HTML

<body ng-controller="MainCtrl">
  <div ng-repeat="item in Data | filter:monthMatch(currentMonth)">
    {{ item }}
  </div>
</body>

Example: http://jsfiddle.net/tfo8ux32/

edited Nov 18, 2015 at 16:37

answered Nov 17, 2015 at 20:03

JstnPwll

8,7252 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor Over a year ago

I tried it and it didn't work out... not sure if it has to do with the multiple filtering options that I have... or if I was missing something while testing. I've updated my post, probably I was missing something on the first show.

JstnPwll Over a year ago

I've added a working fiddle, maybe it will assist you in finding the problem.

Collectives™ on Stack Overflow

Filtering months in angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related