时间戳

首页 > 解决方案 > AngularJS - 根据所选值显示数据列表

javascript - AngularJS - 根据所选值显示数据列表

问题描述

任何帮助表示赞赏。我有一个格式像这样的 JSON 数据

{状态1：[成员1，成员2]，状态2：[成员，成员4 ...]，...}

还有一个下拉菜单显示 JSON 数据的状态列表。根据选择的状态，我需要在表格上显示相应的成员列表。

angular.module('mainModule', []).controller('FetchController', ['$scope', function($scope) {
  $scope.datas = {
    "MN": [{
        "id": "727344064",
        "address": "8614 LIPSEY PKWY",
        "city": "LEWISTON",
        "firstName": "DAINA",
        "lastName": "FASSETT",
        "state": "MN",
        "zip": "55952"
      },
      {
        "id": "222743521",
        "address": "2220 KIEL PKWY",
        "city": "ROCHERT",
        "firstName": "MIKI",
        "lastName": "MCSHANE",
        "state": "MN",
        "zip": "56578"
      },
      {
        "id": "581993933",
        "address": "5933 JAWORSKI RD",
        "city": "UTICA",
        "firstName": "GIANNA",
        "lastName": "LAFAVE",
        "state": "MN",
        "zip": "55979"
      }
    ],
    "IL": [{
        "id": "101396885",
        "address": "4829 JAUREGUI BLVD",
        "city": "CORCORAN",
        "firstName": "CAROLA",
        "lastName": "ALVA",
        "state": "IL",
        "zip": "55357"
      },
      {
        "id": "61041160",
        "address": "9574 OMEARA PKWY",
        "city": "ROCKFORD",
        "firstName": "CHERY",
        "lastName": "TWOMEY",
        "state": "IL",
        "zip": "55373"
      },
      {
        "id": "890443901",
        "address": "9259 ZITO AVE",
        "city": "CHANHASSEN",
        "firstName": "LIZZETTE",
        "lastName": "JAUREGUI",
        "state": "IL",
        "zip": "55317"
      },
      {
        "id": "416775920",
        "address": "6743 CADDELL RD",
        "city": "PIERZ",
        "firstName": "SANDIE",
        "lastName": "NIGRO",
        "state": "IL",
        "zip": "56364"
      },
      {
        "id": "519809487",
        "address": "5544 MCKINZIE BLVD",
        "city": "BLOOMINGTON",
        "firstName": "ALESHIA",
        "lastName": "FINGER",
        "state": "IL",
        "zip": "55435"
      }
    ],
    "NY": [{
        "id": "309969937",
        "address": "3306 SAARI ST",
        "city": "CORMORANT",
        "firstName": "TWANNA",
        "lastName": "HURDLE",
        "state": "NY",
        "zip": "56572"
      },
      {
        "id": "12713045",
        "address": "8211 PENDLEY BLVD",
        "city": "SOUDAN",
        "firstName": "YULANDA",
        "lastName": "MARROW",
        "state": "NY",
        "zip": "55782"
      },
      {
        "id": "108468358",
        "address": "3167 BIBB ST",
        "city": "DEXTER",
        "firstName": "JEANMARIE",
        "lastName": "HURDLE",
        "state": "NY",
        "zip": "55926"
      }
    ],
    "OK": [{
        "id": "93804840",
        "address": "6236 NICKLES BLVD",
        "city": "ANDOVER",
        "firstName": "RICKI",
        "lastName": "KEARSE",
        "state": "OK",
        "zip": "55304"
      },
      {
        "id": "536729166",
        "address": "1939 HURDLE BLVD",
        "city": "ABMPS",
        "firstName": "LAQUANDA",
        "lastName": "RIDENHOUR",
        "state": "OK",
        "zip": "55472"
      }
    ]
  }


}]);
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="mainModule" ng-cloak>
  <div class="container" ng-controller="FetchController">
    <h3>File Viewer App</h3>
    <form name="myForm">
      <label for="selectState"> Select the state: </label>
      <select name="selectState" id="selectState" ng-model="selectedState">
        <option ng-repeat="(state,members) in datas" value="{{state}}">{{state}}</option>
      </select>
    </form>
    <br />
    <div>
      <h4>
        Members from state:
      </h4>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>Address</th>
            <th>City</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>State</th>
            <th>Zip</th>
          </tr>
        </thead>
        <tbody>
          <!--I need to display list of selected state here -->
        </tbody>
      </table>
    </div>
  </div>
</div>

根据选择的状态，我需要在表格中显示具有动态绑定的成员列表。

Plunker 链接点击这里

标签： javascriptangularjshtml-select

解决方案

自从我上次在 Angular JS 中做某事以来已经有一段时间了 :)

在您的 Plunker 示例中，已经有：

ng-change="changeSelectedState()"

但你错过了实施。

我建议采用以下方法：

$scope.selectedState = "";
$scope.selectedMembers = [];

$scope.changeSelectedState = function() {
    $scope.selectedMembers = $scope.datas[$scope.selectedState];
};

其中$scope.selectedState是保存选定状态值的范围变量，例如。"MN" 和$scope.selectedMembers包含具有相应状态成员的数组。

您应该做的最后一件事是在成员表上实现 ng-repeat 循环。

编辑：https ://plnkr.co/edit/BjFark20dScLGUm2

推荐阅读