我正在尝试根据下拉列表的下拉选项来过滤数据。这里我将从 JSON 输入中获取数据。
在申请日期中,我选择了 06/30/2022,因此在此日期可以使用以下地区办事处。
因此,如果我将日期更改为任何其他日期,例如 07/30/2022,它只会显示 2 个地区办事处
如果我们展开 + 图标,它应该显示如下所示的值。这就是要求,我已经完成了扩展折叠功能的代码编写。
但是,我不确定需要如何绑定与日期相关的数据并在下面显示。这是我写的代码
var app = angular.module('acturial', ['ui.bootstrap']);
////configure routes
//// TODO:Will implement and configure routes but for now it is not needed
//app.config(function ($routeprovider) {
// $routeprovider
// // route for default page
// // in our case only page exists for now
// .when('/', { templateurl: 'Index.html', controller: 'Regioncontroller' })
// //todo: can able to add more pages using by specifying the condition in when clause
//});
var RegionController = function ($scope, $http) {
$scope.title = "Acturial App";
//$scope.data = [{
// "name": "Billings",
// "values": ['300031', '300051', '300091', '300111', '300131']
//}];
var regionDetails = [
{
"date": "6/30/2022",
"regionOffice": [
{
"name": "Valdosta",
"values": [
"300031",
"300051",
"300091",
"300111",
"300131"
]
},
{
"name": "Jackson",
"values": [
"300031",
"300051",
"300091",
"300111",
"300131"
]
},
{
"name": "Springfield",
"values": [
"300031",
"300051",
"300091",
"300111",
"300131"
]
},
{
"name": "Billings",
"values": [
"300031",
"300051",
"300091",
"300111",
"300131"
]
}
]
},
{
"date": "7/30/2023",
"regionOffice": [
{
"name": "Springfield",
"values": [
"300031",
"300051",
"300091",
"300111",
"300131"
]
},
{
"name": "Billings",
"values": [
"300031",
"300051",
"300091",
"300111",
"300131"
]
}
]
}
];
$scope.dataArray = regionDetails;
//var billingDetails = {
// name: 'Billings',
// values: ['300031', '300051', '300091', '300111', '300131']
//}
//$scope.data = billingDetails;
// TODO:Still have to make some improvements for the below functions
// The below code will be used when we have WebAPI endpoint so we can use that to populate the data
// instead of the static/hard-coded data
//var onUserComplete = function (response) {
// $scope.data = response.data;
// $http.get($scope.regionUrl)
// .then(onRepos, onError);
//}
//onRepos = function (response) {
// $scope.data = response.data;
//};
//var onError = function (response) {
// $scope.error = "Couldn't able to retreive the data";
//}
$scope.expandedRegion = null;
$scope.manageCollapseExpand = function (obj, isExpandedRegion) {
obj.expanded = !obj.expanded;
if (obj.expanded) {
if (!isExpandedRegion) {
$scope.expandedRegion = obj;
}
}
}
};
app.controller("RegionController", ["$scope", "$uibModal", "$http", RegionController]);
这是 HTML 页面
<!DOCTYPE html>
<html ng-app="acturial" ng-controller="RegionController">
<head>
<meta charset="utf-8" />
<title>{{title}}</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="Scripts/angular.js"></script>
<script src="acturial.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="">
<label>
Filing Date:
</label>
<select ng-model="data.date" ng-options="data.date for data in dataArray" >
<option value=""> </option>
</select>
<br />
</div>
<div class="">
<button class="btn" ng-click="manageCollapseExpand(region, false)">
<span ng-class="{'glyphicon glyphicon-minus': region.expanded, 'glyphicon glyphicon-plus': !region.expanded }"></span>
</button>
{{region.name}} ({{region.values.length}})
</div>
<div class="" ng-show="region.expanded">
<div class="" ng-repeat="value in region.values">
<div class="">
{{value}}
</div>
</div>
</div>
</body>
</html>
如何绑定下拉选择值关联的数据并显示在下方?
下面是我在控制台中看到的结构化数组:
我们将像这样设置数据,因为 ng-options (并选择默认的预选选项)需要绑定到同一对象。在同一个对象上,我们将绑定所选日期和完整数组。另外,我们需要一个索引变量,它将用于将办公室列表与特定日期相关联。
$scope.selectedDateIndex= null
$scope.ds = {};
$scope.ds.dataArray = regionDetails;
$scope.ds.date = $scope.ds.dataArray[0].date // this is our default pre-selected date
$scope.onSelectDate() // this will trigger showing the default date's office list
// this function will take the date that is chosen, find the data set in the array that matches, and set the `$scope.selectedDateIndex` we'll need
$scope.onSelectDate = function () {
let date = $scope.ds.date;
console.log(date)
$scope.ds.dataArray.forEach((el, index) => {
if (el.date == date) $scope.selectedDateIndex = index
})
}
对于
<select>
,设置 ng-change
方法。另外,请注意 ng-model 指向我们之前设置的对象,并且 ng-options
具有这种格式 optionValue as optionName forEach item in dataArray
。为此,Angular 必须关联选项名称和值。
<select ng-model="ds.date"
ng-options="data.date as data.date for data in ds.dataArray"
ng-change="onSelectDate()">
</select>
然后,这里有 2 个外部 div,都使用了
region
对象,这是错误的。我把它们结合起来。您的切换按钮不应调用外部函数 - 只需设置region.expanded = !region.expanded。这样我们就可以将其保留在对象 region
中,该对象仅存在于该循环中。
<div class=""
ng-if="selectedDateIndex !== null"
ng-repeat="region in ds.dataArray[selectedDateIndex].regionOffice">
<!-- for the rest of this loop we can work with the `region` object -->
<button class="btn" ng-click="region.expanded = !region.expanded">
<span
ng-class="{'glyphicon glyphicon-minus': region.expanded, 'glyphicon glyphicon-plus': !region.expanded }"></span>
</button>
{{region.name}} ({{region.values.length}})
<div class="" ng-show="region.expanded">
<div class=""
ng-repeat="value in region.values">
<div class="">
{{value}}
</div>
</div>
</div>
</div>
我无法对此进行测试,因此如果您遇到错误,请告诉我。