javascript - 在 Angular JS 中过滤月份

Question

我有以下链接到下拉列表的数组

$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
        }
    ];

然后我收到一组数据:

$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
}
]

这里的问题是，每当您在 DDL 中选择月份时，它应该只显示该月份所属的数据...例如...选择 11 月，它应该显示月份值等于的所有数据11...

但我注意到，例如，当您选择一月时，它将显示其值中包含 1 的所有数据。在本例中为 1 和 11。

考虑到它是一个 int 而不是字符串，有解决办法吗？

更新:这是我的 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>

和其他数据:

$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
    }
];

Answer 1

您需要定义一个自定义过滤器函数，并在调用过滤器时使用它。像这样的事情:

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>

示例:http://jsfiddle.net/tfo8ux32/