时间戳

首页 > 解决方案 > 如何根据用户输入使用动态 ng-repeat

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

问题描述

我需要使用两个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">

任何帮助表示赞赏:)

标签： javascripthtmljsonangularjs

解决方案

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

要使其正常工作，您需要首先与您的应用程序沟通某些事情发生了变化。尝试将您的第一个输入更改为选择元素并将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

推荐阅读