根据单独选择的选项显示 HTML 选项

Display HTML options based on separately selected options with Angular

本文关键字：选项 显示 HTML 选择 单独      更新时间：2023-09-26

我有一些由各种品牌组成的数据，每个品牌都有一个包含范围名称的嵌套数组（字符串）：

[
    {
        "brandName" : "Brand 1",
        "ranges" : [
            "Range A1",
            "Range A2",
            "Range A3"
        ]
    },
    {
        "brand" : "Brand 2",
        "ranges" : [
            "Range B1",
            "Range B2",
            "Range B3"
        ]
    },
]


我正在尝试做的是显示一个选择元素，其中包含一个选项列表，其中包含范围名称作为其值和 innerHTML，基于先前在单独的选择元素中选择的品牌。

我不确定如何定位选定的品牌对象以获得对嵌套数组的访问权限，因为我正在尝试以"Angular 方式"执行此操作。

目前，我一直在尝试使用 ngRepeat，但无法让它工作。

在控制器中：

$scope.formData = {
    brandData : [
        {
            "brandName" : "Brand 1",
            "ranges" : [
                "Range A1",
                "Range A2",
                "Range A3"
            ]
        },
        {
            "brandName" : "Brand 2",
            "ranges" : [
                "Range B1",
                "Range B2",
                "Range B3"
            ]
        },
    ],
    currentBrand : undefined,
    currentRange : undefined
};


和简化的标记：

<select name="currentBrand" ng-model="formData.currentBrand">
    <option value="" disabled>Select a brand</option>
    <option value="none" selected>None</option>
    <option ng-repeat="brand in formData.brandData" value="{{brand.brandName}}">{{brand.brandName}}</option>
</select>
<select name="currentRange" ng-model="formData.currentRange">
    <option value="" disabled>Select a range</option>
    <option value="none" selected>None</option>
    <option ng-repeat="how do I show each range name in the 'ranges' array of the selected brand ????? value="{{rangeName}}">{{rangeName}}</option>
</select>


有一些类似的问题浮出水面，但我找不到任何特定于我拥有的数据结构的问题。

提前感谢！


更新

多亏了Rohan，我现在已经实现了我最初的目标。但是，我还希望每个option元素的值设置为与其 innerHTML 相同的值。为此，我使用了ngOptions的track by...功能：

<select name="currentBrand" ng-model="formData.currentBrand" ng-options="brandOption as brandOption.brandName for brandOption in brandOptions track by brandOption.brandName">
    <option value="" disabled>Select a brand</option>
</select>
<select name="currentRange" ng-model="formData.currentRange" ng-options="rangeOption for rangeOption in formData.currentBrand.ranges track by rangeOption">
    <option value="" disabled>Select a range</option>
</select>


对于一个工作示例，我已经分叉并更新了 Rohan 的 jsfiddle：http://jsfiddle.net/munkychop/hgzdannz/1/

为此使用 ng-options：https://docs.angularjs.org/api/ng/directive/select

您需要将所选品牌设置为对象，然后在下一个ng选项选择中使用该品牌重复您的范围。

   <div>
        <select name="currentBrand" ng-model="currentBrand"
                ng-options="brandOption as brandOption.brandName for brandOption in brandOptions">
                <option value="" disabled>Select a brand</option>
            </select>
        </div>
        <span>Selected brand: {{currentBrand}}</span>
        <div>
            <select name="currentRange" ng-model="currentRange"
            ng-options="rangeOption for rangeOption in currentBrand.ranges">
                <option value="" disabled>Select a range</option>
            </select>
        </div>
        <span>Selected Range: {{currentRange}}</span>
    </div>

下面是您的代码片段：

http://jsfiddle.net/hjq7gbLz/

你需要的是品牌数组中所选元素的索引，以便你可以在 ng-repeat 中使用它，如下所示：

<option ng-repeat="range in formData.brandData[currentBrand].ranges" value="{{rangeName}}">{{rangeName}}</option>

您可以在作用域上有一个变量来存储它，或者通过使用索引作为选项的值来更轻松地执行此操作：

<option ng-repeat="brand in formData.brandData" value="{{$index}}">{{brand.brandName}}</option>

由于 curretBrand 是所选的模型，因此 2 路数据绑定将在品牌选择器更改时更新品牌选择器，而无需在控制器上添加更多代码。

这是一个要演示的小提琴。

您可以采用在控制器中定义方法的方法，以获取与当前所选品牌对应的范围。 这可能是让你朝着正确方向前进的近似值：

$scope.getCurrentBrandRanges = function() {
  for (var i=0;i < $scope.formData.brandData.length;i++) {
    if ($scope.formData.brandData[i].brandName == $scope.formData.currentBrand)
      return $scope.formData.brandData[i].ranges;
  }
  return []; // In case nothing matches for some reason.
}

对于 ng-repeat 指令，您可以指定如下内容：

ng-repeat="range in getCurrentBrandRanges()"
相关文章：