下面是一个基于AngularJS的解决方法,根据选择的值来显示数据列表的示例代码:
HTML代码:
- {{ item.name }}
JavaScript代码:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [
{ name: '项目1', category: 'category1' },
{ name: '项目2', category: 'category2' },
{ name: '项目3', category: 'category1' },
{ name: '项目4', category: 'category3' },
{ name: '项目5', category: 'category2' }
];
$scope.filterItems = function() {
if ($scope.selectedCategory) {
$scope.filteredItems = $scope.items.filter(function(item) {
return item.category === $scope.selectedCategory;
});
} else {
$scope.filteredItems = $scope.items;
}
};
});
在这个示例中,我们首先在HTML中创建了一个下拉选择框,用于选择项目的分类。然后,我们使用ng-model
指令来绑定选择框的值到selectedCategory
变量上。接着,我们使用ng-change
指令来监视选择框的变化,并调用filterItems
函数进行数据列表的筛选。
在JavaScript中,我们定义了一个控制器myCtrl
,并在其中初始化了一个包含项目的数组items
。filterItems
函数会根据选择的分类值来筛选items
数组,并将结果存储在filteredItems
变量中。最后,我们使用ng-repeat
指令在HTML中循环遍历filteredItems
数组,并显示每个项目的名称。
这样,当用户选择一个分类时,列表会根据选择的值进行筛选,只显示该分类下的项目。如果选择了“全部”,则会显示所有项目。