AngularJS下拉选择：选中ID后如何展示对应完整信息？

嘿，这事儿不难！你已经搞定了下拉菜单的填充和brakeId的获取，现在要展示对应详情，我给你两种简单的实现方式，挑你觉得顺手的来：

方法一：直接在视图里用过滤器查找（快速实现） #

不用改控制器，直接在HTML里借助AngularJS的filter过滤器，从fillBreaks数组里匹配选中的brakeId，然后取出对应字段就行：

<!-- 你的下拉菜单保持不变 -->
<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>

<!-- 选中后展示详情区域 -->
<div ng-if="car.marca">
  <h3>Detalles de la marca seleccionada</h3>
  <p><strong>Precio:</strong> {{ (fillBreaks | filter: {brakeId: car.marca})[0].price || 'Sin datos' }}</p>
  <p><strong>Descripción:</strong> {{ (fillBreaks | filter: {brakeId: car.marca})[0].description || 'Sin descripción' }}</p>
  <p><strong>Stock:</strong> {{ (fillBreaks | filter: {brakeId: car.marca})[0].stock || 'Sin stock' }}</p>
</div>

说明：

• filter: {brakeId: car.marca}会帮你从数组里筛选出brakeId和选中值一致的项，因为过滤器返回的是数组，所以用[0]取第一个匹配项（前提是你的brakeId是唯一的哈）
• || 'Sin datos'是加个默认值，防止字段为空时显示undefined
• ng-if="car.marca"保证没选中任何选项时，这个详情区域不会显示

方法二：控制器里监听变化（更高效，适合大数据量） #

如果你的fillBreaks数据量比较大，在视图里反复用过滤器可能有点慢，那就在控制器里监听选中的brakeId，提前把对应数据找出来存好，视图直接绑定就行：

控制器代码：

// 假设这是你的控制器
app.controller('TuControlador', function($scope) {
  // 这里是你的JSON数据，假设已经加载好了
  $scope.fillBreaks = [
    // 示例数据
    { brakeId: 9, name: "Marca A", price: 199.99, description: "Frenos de alta calidad", stock: 50 },
    { brakeId: 10, name: "Marca B", price: 149.99, description: "Frenos económicos", stock: 100 }
  ];
  
  $scope.car = { marca: '' };
  
  // 监听选中的brakeId变化
  $scope.$watch('car.marca', function(nuevoBrakeId) {
    if (nuevoBrakeId) {
      // 用find方法找到匹配的项（ES6语法，兼容旧浏览器的话可以用filter+[0]）
      $scope.detalleSeleccionado = $scope.fillBreaks.find(function(item) {
        return item.brakeId === nuevoBrakeId;
      });
    } else {
      // 没选中时清空详情
      $scope.detalleSeleccionado = null;
    }
  });
});

视图代码：

<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>

<div ng-if="detalleSeleccionado">
  <h3>Detalles de la marca seleccionada</h3>
  <p><strong>Precio:</strong> {{ detalleSeleccionado.price }}</p>
  <p><strong>Descripción:</strong> {{ detalleSeleccionado.description }}</p>
  <p><strong>Stock:</strong> {{ detalleSeleccionado.stock }}</p>
</div>

说明：

• 用$watch监听car.marca的变化，每次选中新选项时，自动查找对应的数据并存到detalleSeleccionado里
• 视图里直接绑定这个变量，代码更简洁，性能也更好

两种方式都能实现你的需求，根据自己的场景选就行！

内容的提问来源于stack exchange，提问作者Rodolfo R