根据 AngularJS 中 JSON 输入的下拉选择绑定数据

Question

我正在尝试根据下拉列表的下拉选项来过滤数据。这里我将从 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>

如何绑定下拉选择值关联的数据并显示在下方？

下面是我在控制台中看到的结构化数组：

Answer 1

我们将像这样设置数据，因为 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>

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