Javascript 用角JS过滤月份
我有一个链接到dropdownlist的数组Javascript 用角JS过滤月份,javascript,json,angularjs,asp.net-mvc,Javascript,Json,Angularjs,Asp.net Mvc,我有一个链接到dropdownlist的数组 $scope.Months = [ { Name: "Month", Value: undefined }, { Name: "Jan", Value: 1 }, { Name: "Feb", Value: 2
$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的所有数据
但我注意到,例如,当您选择一月时,它将显示其值中包含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>
您需要定义一个自定义筛选器函数,并在调用筛选器时使用它。大概是这样的: 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>
{{item}}
示例:您需要定义一个自定义筛选器函数,并在调用筛选器时使用它。大概是这样的: 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>
{{item}}
示例:我们可以查看您的HTML标记吗?完成。。。我更新了postCan我们看到你的HTML标记了吗?完成。。。我更新了帖子,我试过了,但没有成功。。。不确定这是否与我拥有的多个过滤选项有关。。。或者我在测试时遗漏了什么。我已经更新了我的帖子,可能是我在第一个节目中遗漏了什么。我添加了一个工作小提琴,也许它会帮助你发现问题。我尝试过,但没有成功。。。不确定这是否与我拥有的多个过滤选项有关。。。或者我在测试时遗漏了什么。我已经更新了我的帖子,可能是我在第一场秀中遗漏了什么。我添加了一把工作小提琴,也许它会帮助你发现问题。