基于angularjs中json输入的下拉选择绑定数据

dsf9zpds  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(328)

我希望你们在这个大流行时期做得很好，抽出一些时间来帮助我。
我正在尝试根据下拉列表的下拉选择筛选数据。这里我将从json输入中获取数据。
在提交日期中，我选择了2022年6月30日，因此在此日期，以下地区办事处可用。

因此，如果我将日期更改为任何其他日期，如2022年7月30日，则仅显示2个地区办事处

如果我们展开+图标，它应该显示如下所示的值。这就是要求，我已经完成了编写扩展折叠功能的代码的工作。

但是，我不确定我需要如何绑定与下面的日期和显示关联的数据。这是我写的代码

  1. var app = angular.module('acturial', ['ui.bootstrap']);
  3. ////configure routes
  4. //// TODO:Will implement and configure routes but for now it is not needed
  5. //app.config(function ($routeprovider) {
  6. //    $routeprovider
  8. //        // route for default page
  9. //        // in our case only page exists for now
  10. //        .when('/', { templateurl: 'Index.html', controller: 'Regioncontroller' })
  12. //    //todo: can able to add more pages using by specifying the condition in when clause
  13. //});
  15. var RegionController = function ($scope, $http) {
  17.     $scope.title = "Acturial App";
  18.     //$scope.data = [{
  19.     //    "name": "Billings",
  20.     //    "values": ['300031', '300051', '300091', '300111', '300131']
  21.     //}];
  23.     var regionDetails = [
  24.         {
  25.             "date": "6/30/2022",
  26.             "regionOffice": [
  27.                 {
  28.                     "name": "Valdosta",
  29.                     "values": [
  30.                         "300031",
  31.                         "300051",
  32.                         "300091",
  33.                         "300111",
  34.                         "300131"
  35.                     ]
  36.                 },
  37.                 {
  38.                     "name": "Jackson",
  39.                     "values": [
  40.                         "300031",
  41.                         "300051",
  42.                         "300091",
  43.                         "300111",
  44.                         "300131"
  45.                     ]
  46.                 },
  47.                 {
  48.                     "name": "Springfield",
  49.                     "values": [
  50.                         "300031",
  51.                         "300051",
  52.                         "300091",
  53.                         "300111",
  54.                         "300131"
  55.                     ]
  56.                 },
  57.                 {
  58.                     "name": "Billings",
  59.                     "values": [
  60.                         "300031",
  61.                         "300051",
  62.                         "300091",
  63.                         "300111",
  64.                         "300131"
  65.                     ]
  66.                 }
  67.             ]
  68.         },
  69.         {
  70.             "date": "7/30/2023",
  71.             "regionOffice": [
  73.                 {
  74.                     "name": "Springfield",
  75.                     "values": [
  76.                         "300031",
  77.                         "300051",
  78.                         "300091",
  79.                         "300111",
  80.                         "300131"
  81.                     ]
  82.                 },
  83.                 {
  84.                     "name": "Billings",
  85.                     "values": [
  86.                         "300031",
  87.                         "300051",
  88.                         "300091",
  89.                         "300111",
  90.                         "300131"
  91.                     ]
  92.                 }
  93.             ]
  94.         }
  95.     ];
  97.     $scope.dataArray = regionDetails;
  98.     //var billingDetails = {
  99.     //    name: 'Billings',
  100.     //    values: ['300031', '300051', '300091', '300111', '300131']
  101.     //}
  103.     //$scope.data = billingDetails;
  105.     // TODO:Still have to make some improvements for the below functions
  106.     // The below code will be used when we have WebAPI endpoint so we can use that to populate the data
  107.     // instead of the static/hard-coded data
  108.     //var onUserComplete = function (response) {
  109.     //    $scope.data = response.data;
  110.     //    $http.get($scope.regionUrl)
  111.     //        .then(onRepos, onError);
  112.     //}
  114.     //onRepos = function (response) {
  115.     //    $scope.data = response.data;
  116.     //};
  118.     //var onError = function (response) {
  119.     //    $scope.error = "Couldn't able to retreive the data";
  120.     //}
  122.     $scope.expandedRegion = null;
  124.     $scope.manageCollapseExpand = function (obj, isExpandedRegion) {
  125.         obj.expanded = !obj.expanded;
  127.         if (obj.expanded) {
  128.             if (!isExpandedRegion) {
  129.                 $scope.expandedRegion = obj;
  130.             }
  131.         }
  132.     }
  133. };
  135. app.controller("RegionController", ["$scope", "$uibModal", "$http", RegionController]);

这是html页面

  1. <!DOCTYPE html>
  2. <html ng-app="acturial" ng-controller="RegionController">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>{{title}}</title>
  7.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  8.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  9.     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  10.     <script src="Scripts/angular.js"></script>
  11.     <script src="acturial.js"></script>
  12.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
  13.     <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" />
  14.     <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" />
  15.     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  16. </head>
  18. <body>
  19.     <div class="">
  20.         <label>
  21.             Filing Date:
  22.         </label>
  23.          <select ng-model="data.date" ng-options="data.date for data in dataArray" >
  24.         <option value=""> </option>
  25.     </select>
  26.         <br />
  27.     </div>
  28.     <div class="">
  29.         <button class="btn" ng-click="manageCollapseExpand(region, false)">
  30.             <span ng-class="{'glyphicon glyphicon-minus': region.expanded, 'glyphicon glyphicon-plus': !region.expanded }"></span>
  31.         </button>
  32.         {{region.name}} ({{region.values.length}})
  33.     </div>
  34.     <div class="" ng-show="region.expanded">
  35.         <div class="" ng-repeat="value in region.values">
  36.             <div class="">
  37.                 {{value}}
  38.             </div>
  39.         </div>
  40.     </div>
  41. </body>
  42. </html>

因此，您可以帮助我绑定与下拉选择值关联的数据并显示在下面吗？
下面是我在控制台中看到的结构化阵列

JavaScriptHtmlangularjsasp.net

1条答案

按热度按时间
z18hc3ub

z18hc3ub1#

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

  1. $scope.selectedDateIndex= null
  2. $scope.ds = {};
  3. $scope.ds.dataArray = regionDetails;
  4. $scope.ds.date = $scope.ds.dataArray[0].date // this is our default  pre-selected date
  5. $scope.onSelectDate() // this will trigger showing the default date's office list
  7. // 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
  8.     $scope.onSelectDate =  function () {
  9.       let date = $scope.ds.date;
  10.        console.log(date)
  11.         $scope.ds.dataArray.forEach((el, index) => {
  12.             if (el.date == date) $scope.selectedDateIndex = index
  13.         })
  14.     }

对于 <select> ，设立 ng-change 方法。另外，请注意我们之前设置的对象上的ng模型点，以及 ng-options 有这种格式吗 optionValue as optionName forEach item in dataArray . 为此，angular必须同时关联选项名称和值。

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

然后，这里有两个外部div，都使用 region 对象是错误的。我把它们合在一起。您的切换按钮不应调用外部函数-只需设置region.expanded=！地区扩大了。这样我们就可以把它放在物体里面 region 它只存在于这个循环中。

  1. <div class="" 
  2.     ng-if="selectedDateIndex !== null" 
  3.     ng-repeat="region in ds.dataArray[selectedDateIndex].regionOffice">
  4.     <!-- for the rest of this loop we can work with the `region` object -->
  6.     <button class="btn" ng-click="region.expanded = !region.expanded">
  7.         <span 
  8.             ng-class="{'glyphicon glyphicon-minus': region.expanded, 'glyphicon glyphicon-plus': !region.expanded }"></span>
  9.     </button>
  10.     {{region.name}} ({{region.values.length}})
  11.     <div class="" ng-show="region.expanded">
  12.         <div class="" 
  13.             ng-repeat="value in region.values">
  14.             <div class="">
  15.                 {{value}}
  16.             </div>
  17.         </div>
  18.     </div>
  19. </div>

我无法测试这个，所以如果您遇到错误，请告诉我。

展开查看全部
赞(0）分享  回复(0）举报  2021-09-29
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com