Javascript 如何根据用户输入使用动态ng重复

我需要使用两个

ng repeat

：一个显示汽车品牌，另一个显示汽车型号。最后一个应该只展示选定汽车品牌的车型，但我不知道怎么做

我的两个JSON文件具有以下结构：

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

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

---

非常感谢您的帮助：）

您在进行选择时不需要输入。可以使用select元素

要使其正常工作，您需要首先与应用程序通信，告知某些内容已发生更改。尝试将第一个输入更改为select元素，并在其中放入

onchange

处理程序。当选择一个品牌时，我们会将该品牌的模型保存到$scope中，并在模型部分进行渲染。我们可以使用

ng if

来显示车型选择，但前提是已经进行了品牌选择

接下来，在进行模型选择时，您可以使用类似的模式

我们可以使用“as”关键字设置选择选项的值。

b.id作为b.name

意味着我们将显示名称，但存储id的值

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

---

编辑：正确使用ng选项

我尝试了这个，但没有成功。。。经过一点研究，我发现

ng repeat

只使用字符串而不使用object，因此

b.id作为b.name

不起作用：（很遗憾，我使用的是HTML的

数据列表

，它不支持

ng选项

。一旦我找不到其他解决方法，我就使用了另一个

解决方案。但我会接受你的回答，谢谢你的帮助：）

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

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