[英]Bind data based on the drop down selection from JSON input in AngularJS
I hope you guys are doing good in this pandemic time and spare some time to help me out.我希望你们在这个大流行期间做得很好,并抽出一些时间来帮助我。
I am trying to filter the data based on the drop-down selections of a drop-down list.我正在尝试根据下拉列表的下拉选择过滤数据。 Here I will get the data from the JSON input.
在这里,我将从 JSON 输入中获取数据。
Here in the Filing Date, I have selected 06/30/2022 so for this date the below region offices are available.在申请日期中,我选择了 2022 年 6 月 30 日,因此在此日期以下地区办事处可用。
So if I change the date to any another date like 07/30/2022 it is showing only 2 region offices因此,如果我将日期更改为任何其他日期,例如 2022 年 7 月 30 日,它只会显示 2 个地区办事处
And if we expand the + icon it should display the values like below.如果我们展开 + 图标,它应该显示如下值。 That is the requirement and I am done with writing the code for expanding collapse functionality.
这是要求,我已经完成了编写扩展折叠功能的代码。
However, I am not sure how I need to bind the data associated with the date and display below.但是,我不确定我需要如何绑定与日期相关的数据并在下面显示。 Here is the code I have written
这是我写的代码
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]);
Here is the HTML Page这是 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>
So can you please help me with binding the data associated with the drop-down selected value and display below?那么您能帮我绑定与下拉选定值关联的数据并在下面显示吗?
And below is the structured array I am seeing in the Console下面是我在控制台中看到的结构化数组
We'll set up the data like this because ng-options (and choosing a default pre-selected option) requires binding to the same object.我们将像这样设置数据,因为 ng-options(并选择默认的预选选项)需要绑定到相同的 object。 On the same object, we'll bind the chosen date, and the full array.
在同一个 object 上,我们将绑定所选日期和完整数组。 Plus we need a variable for the index, which will be used to associate the office list with a particular date.
另外,我们需要一个用于索引的变量,它将用于将办公室列表与特定日期相关联。
$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
})
}
For the <select>
, set up an ng-change
method.对于
<select>
,设置一个ng-change
方法。 Also, notice the ng-model points at the object we set up before, and ng-options
has this format optionValue as optionName forEach item in dataArray
.另外,请注意 ng-model 指向我们之前设置的 object,并且
ng-options
具有这种格式optionValue as optionName forEach item in dataArray
。 For this to work, angular has to associate both option name and value.为此,angular 必须关联选项名称和值。
<select ng-model="ds.date"
ng-options="data.date as data.date for data in ds.dataArray"
ng-change="onSelectDate()">
</select>
Then, here you had 2 outer divs, both using the region
object which was wrong.然后,这里有 2 个外部 div,都使用了错误的
region
object。 I combined them.我把它们结合起来。 Your toggle button shouldn't call an outside function - just set region.expanded =.region.expanded.
您的切换按钮不应调用外部 function - 只需设置 region.expanded =.region.expanded。 That way we keep it inside the object
region
which only exists in this loop.这样,我们将其保留在仅存在于此循环中的 object
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>
I can't test this, so if you run into an error, let me know.我无法对此进行测试,所以如果您遇到错误,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.