AngularJS Выбрать |После выбора идентификатора из JSON покажите остальную информацию этого идентификатора.

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 выбранного элемента, в этом случае он сохраняется в 'car.marca' с помощью ng-модели.

ng-model="car.marca"

Мой вопрос: на основе выбранного элемента скажем 'BrakeId: 9'Как я могу отобразить остальную информацию этого выбранного идентификатора?

Я хочу отобразить цену, описание, запас и т. Д.

Answer 1

Вы можете изменить ваши ng-опции, чтобы захватить весь выбранный объект, а не только его ID.

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

См. Этот JSFiddle, например

PS Небольшая хитрость для удаления опции Placeholder из выпадающего списка заключается в добавлении style="display: none;"к нему, так что он не может быть намеренно выбран;также показано в JSfiddle

Answer 2

Вы можете получить выделенный объект, выполнив find на fillBreaks (должно быть fillBrakes?) Для объекта с совпадающим 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>