Javascript 基于AngularJS中JSON输入的下拉选择绑定数据

我希望你们在这个大流行时期做得很好，抽出一些时间来帮助我

我正在尝试根据下拉列表的下拉选择筛选数据。这里我将从JSON输入中获取数据

在提交日期中，我选择了2022年6月30日，因此在此日期，以下地区办事处可用

因此，如果我将日期更改为任何其他日期，如2022年7月30日，则仅显示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>

{{title}}
申请日期：


{{region.name}}（{{region.values.length}）
{{value}}

因此，您可以帮助我绑定与下拉选择值关联的数据并显示在下面吗

下面是我在控制台中看到的结构化阵列

---

我们将这样设置数据，因为ng选项（以及选择默认的预选选项）需要绑定到同一对象。在同一个对象上，我们将绑定所选日期和完整数组。此外，我们还需要一个索引变量，用于将办公室列表与特定日期关联

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

对于

，设置

ng change

方法。另外，请注意ng模型指向我们之前设置的对象，并且

ng options

将此格式

optionValue作为dataArray中每个项的optionName

。为此，angular必须同时关联选项名称和值

<select ng-model="ds.date" 
    ng-options="data.date as data.date for data in ds.dataArray" 
    ng-change="onSelectDate()">
</select>

---

我无法对此进行测试，因此如果您遇到错误，请告诉我。

什么不起作用/？它似乎接线正确。您希望发生的事情没有发生？@Kinglish我正在获取日期字段，但我不确定如何根据下拉列表绑定和显示数据。这不是您最初的代码或要求的一部分。您询问了如何将日期从下拉列表绑定到显示，希望这段代码能够做到这一点。我展示了如何根据所选日期影响显示，以及如何根据所选区域显示值。感谢您向我展示，没有表格我也可以，但您提供的代码没有在HTML中显示任何内容。我只需要根据下拉选择绑定数据，并显示与给定输入关联的数据。我稍后会更新它，现在我只需要显示数据。谢谢你引导我思考好的，我可以帮你度过难关。您是否看到“选择”菜单选项？当您选择一个时，javascript中是否有错误？我无法在HTML页面上看到任何内容。我做了检查，但我相信它没有呈现到HTML。我在HTML正文中看到了下面的内容，所以页面上有N行吗？没有菜单吗？

<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>