javascript - AngularJS 选择 |从 JSON 中选择一个 id 后显示该 id 的其余信息

Question

我保存了一个包含大量信息的 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 的其余信息？

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

Answer 1

您可以通过在 fillBreaks(应该是 fillBrakes？)上执行 find 以获取具有匹配 的对象>brakeId 使用 ng-change 如下。这将允许您显示额外的刹车信息，同时保持 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>