根据使用 Angular 单独选择的选项显示 HTML 个选项

Question

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

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

我想要做的是根据先前在单独的 select 元素中 selected 的品牌，显示一个 select 元素，其中包含一个包含范围名称作为其值和 innerHTML 的选项列表。

我不确定如何着手定位 selected 品牌对象以获得对嵌套数组的访问权限，因为我正在尝试这样做 'the Angular way'。

目前，我一直在尝试使用 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/

Answer 1

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

$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()"

Answer 2

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

您需要将您的 selected 品牌设置为一个对象，然后使用该品牌在您的下一个 ng-options select.

中重复您的范围

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

Answer 3

您需要的是品牌数组中 selected 元素的索引，以便您可以像这样在 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 是您 select 的模型，2 向数据绑定将更新您的品牌 select 或者当品牌发生变化时，您的控制器上不需要任何更多代码。

Here is a fiddle to demonstrate.

根据使用 Angular 单独选择的选项显示 HTML 个选项

Display HTML options based on separately selected options with Angular

javascript

angularjs

angularjs-ng-repeat