Как использовать Dynami c NG-повтор в зависимости от ввода пользователя

Question

Мне нужно использовать два ng-repeat: один показывает марки автомобилей, а другой показывает модели автомобилей. Последний должен представлять только модели выбранных марок автомобилей, но я понятия не имею, как это сделать.

Мои два файла JSON имеют такую ​​структуру:

{
  "brands" : [
  {
    "id": 0,
    "name": "Alfa Romeo",
    "short_url": "alfa-romeo"
  },

{ "models" : [
  {
    "id": 0,
    "brand_id": 0,
    "name": "MiTo"
  }, ...

И мой HTML выглядит так:

<label>Brand 
    <input list="brands" name ="brand" type="text" placeholder="Select your brand...">
    <datalist id="brands">
        <option ng-repeat="b in brands">{{b.name}}</option>
    </datalist>
</label>

<label>Model 
    <input list="models" name ="models" type="text" placeholder="Select your model...">
    <datalist id="models">
        <option ng-repeat="m in models">{{m.name}}</option>
    </datalist>
</label>

Мне нужно сравнить идентификатор бренда модели с идентификатором выбранного бренда. Я слышал о ng-if, поэтому я попробовал это (не работало):

<div ng-if="models.brand_id === b.id">

Любая помощь приветствуется:)

Answer 1

Вам не нужно вводить при выборе. Вы можете использовать элемент select.

Чтобы это работало, вам нужно сначала сообщить в ваше приложение, что что-то изменилось. Попробуйте изменить свой первый ввод на элемент select и добавить в него обработчик onchange. Когда выбран бренд, мы сохраним модели этого бренда в $ области и отобразим их в разделе «Модели». Мы можем использовать ng-if для отображения выбора моделей, только если был сделан выбор бренда.

В дальнейшем вы можете использовать аналогичный шаблон для выбора модели

Мы можем установить значение параметров выбора с помощью ключевого слова «as». b.id as b.name означает, что мы будем отображать имя, но сохраняем значение идентификатора.

<label>Brand 
    <select onchange="handleChange" ng-options="b.id as b.name for b in brand"/>
</label>

<label>Model
  <select ng-if="modelsOfSelectedBrand" ng-options="m.id as m.name for m in models"/>
</label>

Затем в вашей директиве

$scope.handleChange((e) => {
// filter out models that are not from the selected brand
  $scope.modelsOfSelectedBrand = $scope.models.filter(model => model.brand_id === e.target.value)
})

РЕДАКТИРОВАТЬ: правильно использовать ng-options