AngularJS 选择 |从 JSON 中选择一个 id 后，显示该 id 的其余信息答案

【问题标题】：AngularJS Select | After selecting an id from a JSON show the rest of the information of that idAngularJS 选择 |从 JSON 中选择一个 id 后，显示该 id 的其余信息
【发布时间】：2018-10-28 22:47:58
【问题描述】：

我保存了一个包含大量信息的 JSON：

我可以通过这种方式用 JSON 中每个元素的所有名称填充选择菜单：

<select ng-model="car.marca" ng-options="item.brakeId as item.name for item in fillBreaks" class="form-control cforms" required>
  <option value="" disabled selected>Sleccionar Marca</option>
 </select>

得到这个结果：一个充满名称的选择菜单：

我能够获取所选元素的 BreakId，在这种情况下使用 ng-model 保存在“car.marca”中。

ng-model="car.marca"

我的问题是，基于所选元素，让我们说“BrakeId：9”，我如何显示该所选 ID 的其余信息？

我想显示价格、描述、库存等。

【问题讨论】：

你想在哪里显示信息？在另一个部分的选择之外还是在选择区域内？
请问为什么我的回答不好？这是一个更简单的解决方案，并且符合 AngularJS 指南。

标签： javascript html angularjs forms model-view-controller

【解决方案1】：

您可以通过使用ng-change 对具有匹配brakeId 的对象在fillBreaks（应该是fillBrakes？）上执行find 来获取所选对象，如下所示。这将允许您显示额外的刹车信息，同时保持car.marca 为真以保持brakeID。

var exampleApp = angular.module('exampleApp', []);
exampleApp.controller('ExampleController', ['$scope', function($scope) {
  $scope.car = null;
  $scope.fillBreaks = [
    { brakeId: 0, name: 'Brake A', description: 'Good brakes', price: 100, stock: 1 },
    { brakeId: 1, name: 'Brake B', description: 'Great brakes', price: 200, stock: 1 },
    { brakeId: 2, name: 'Brake C', description: 'The best brakes', price: 300, stock: 1 }
  ];
  $scope.brakeInfo = null;
  $scope.getBrakeInfo = function(brakeId) {
    $scope.brakeInfo = $scope.fillBreaks.find(function(item){return item.brakeId == brakeId});
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="exampleApp" ng-controller="ExampleController">
  <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in fillBreaks" ng-change="getBrakeInfo(car.marca)" class="form-control cforms" required>
    <option value="" disabled selected>Sleccionar Marca</option>
  </select>
  <p>{{ brakeInfo }}</p>
</div>

【讨论】：

【解决方案2】：

您可以更改 ng-options 以获取整个选定对象，而不仅仅是它的 ID。

ng-options="item as item.name for item in ctrl.fillBreaks"

See this JSFiddle for example

附：从下拉列表中删除占位符选项的一个小技巧是在其中添加style="display: none;"，这样就不会被故意选中；在 JSfiddle 中也有说明

【讨论】：