Question

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

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

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

我不确定如何定位所选择的品牌对象以获取对嵌套数组的访问权限，因为我正在尝试使用Angular方式＆＃39;。

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

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

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

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

您需要的是品牌数组中所选元素的索引，以便您可以在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是您选择的型号，因此双向数据绑定将在您更改品牌选择器时更新，而无需在控制器上再添加任何代码。

Here is a fiddle to demonstrate.

Answer 3

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

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

使用Angular基于单独选择的选项显示HTML选项

3 个答案: