如何根据用户输入使用动态 ng-repeat

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>

我需要将模型的品牌 ID 与所选品牌的 ID 进行比较。我听说过ng-if，所以我尝试了这个（没用）：

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

任何帮助表示赞赏:)

Answer 1

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

要使其正常工作，您需要先与您的应用沟通某些内容已发生变化。尝试将您的第一个输入更改为一个选择元素并在其中放置一个onchange 处理程序。当一个品牌被选中时，我们将把该品牌的模型保存到 $scope 并在 Models 部分中呈现它们。我们可以使用ng-if 来显示型号选择，前提是选择了品牌。

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

我们可以使用“as”关键字来设置选择选项的值。 b.id as 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>

然后在你的指令中

$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