AngularJS

Question

感谢任何帮助。我有一个 JSON 格式的数据

{ state1: [ member1, member2], state2: [ member,member4...], ... }

并且有一个下拉列表显示 JSON 数据的状态列表。根据选择的状态，我需要在 table.

上显示相应的成员列表

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>

根据选择的状态，我需要在 table 中使用动态绑定显示成员列表。

笨蛋 link click here

Answer 1

距离我上次在 Angular JS 中做一些事情已经有一段时间了:)

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

ng-change="changeSelectedState()"

但是您缺少实现。

我建议采用以下方法：

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

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

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

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

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

AngularJS - 根据选择的值显示数据列表

AngularJS - Display the list of data based on the selected value

javascript

html-select