Angularjs 使用ng repeat在Angular中进行动态下拉

我的应用程序为用户提供了从几个下拉菜单中选择的选项，第三个菜单应该是动态的，这取决于前两个菜单中的选择

我使用ng repeat和ng if来设置这样的条件

// First dropdown menu
<select ng-model="letter" class = "form-control">
    <option ng-repeat= "letter in letters" value = "letter">{{letter}}</option>
</select>

<br>

// second dropdown menu
<select ng-model="number" class = "form-control">
    <option ng-repeat = "number in numbers" value = "number">{{number}}</option>
</select>

<br>

// third dropdown menu
<select ng-model="color" class="form-control">
    <option ng-repeat="A1_color in A1_colors" ng-if= "letter = A & number = 1" value="{{A1_color}}">{{A1_color}}</option>
</select>

...

<select ng-model="color" class="form-control">
    <option ng-repeat="B2_color in B2_colors" ng-if= "letter = B & number = 2" value="{{B2_color}}">{{B2_color}}</option>
</select>

因此，如果用户从第一个菜单中选择“A”，从第二个菜单中选择“2”，他应该会在第三个菜单中看到“A2_颜色”的选项。正确的方法是什么

正确的方法是相当主观的。这只是一个较小的例子，它将是一个更大的字母、数字和颜色集合吗？这里有一种方法，您可以不用创建一大堆显示或隐藏的

元素

JS:

HTML:

<div ng-app="app" ng-controller="ctrl">
    <select ng-model="selectedLetter" 
            ng-change="setColorSelection()" 
            ng-options="letter as letter for letter in letters">
    </select>
    <select ng-model="selectedNumber" 
            ng-change="setColorSelection()" 
            ng-options="number as number for number in numbers">
    </select>
    <select ng-model="selectedColor" 
            ng-if="colorSelection.length" 
            ng-options="color as color for color in colorSelection">
    </select>
</div>

正确的方法是相当主观的。这只是一个较小的例子，它将是一个更大的字母、数字和颜色集合吗？这里有一种方法，您可以不用创建一大堆显示或隐藏的

元素

JS:

HTML:

<div ng-app="app" ng-controller="ctrl">
    <select ng-model="selectedLetter" 
            ng-change="setColorSelection()" 
            ng-options="letter as letter for letter in letters">
    </select>
    <select ng-model="selectedNumber" 
            ng-change="setColorSelection()" 
            ng-options="number as number for number in numbers">
    </select>
    <select ng-model="selectedColor" 
            ng-if="colorSelection.length" 
            ng-options="color as color for color in colorSelection">
    </select>
</div>

---

我想，当angular有另一个指令ng选项时，为什么要对

标记使用ng repeat。您应该使用ng选项，而不是ng repeat。尽管如此，您也可以使用ng repeat，但这不是进行标准编码的好方法

ng选项的语法：

 <select ng-model="item" 
         ng-options="item as item for item in collection">
 </select>

您的问题将通过以下代码解决：

<div ng-app="MyApp" ng-controller="ctrl">
    <select ng-model="letter" 
            ng-options="letter as letter for letter in letters">
    </select>
    <select ng-model="number" 
            ng-options="number as number for number in numbers">
    </select>
    <select ng-model="color" 
            ng-options="color as color for color in colors">
    </select>
</div>

---

我想，当angular有另一个指令ng选项时，为什么要对

标记使用ng repeat。您应该使用ng选项，而不是ng repeat。尽管如此，您也可以使用ng repeat，但这不是进行标准编码的好方法

ng选项的语法：

 <select ng-model="item" 
         ng-options="item as item for item in collection">
 </select>

您的问题将通过以下代码解决：

<div ng-app="MyApp" ng-controller="ctrl">
    <select ng-model="letter" 
            ng-options="letter as letter for letter in letters">
    </select>
    <select ng-model="number" 
            ng-options="number as number for number in numbers">
    </select>
    <select ng-model="color" 
            ng-options="color as color for color in colors">
    </select>
</div>

谢谢！是的，这是一个巨大的不同颜色、数字和字母列表的小例子。我唯一关心的是，这种方法在var colors[]中看起来很混乱，因为我有多少项。你能解释一下，如果我在[]中有一个元组，我将如何这样做吗？'A1'：['red'：'dark'，'pink'：'light']？我已经实现了你的方法，但是选项没有显示出来谢谢！是的，这是一个巨大的不同颜色、数字和字母列表的小例子。我唯一关心的是，这种方法在var colors[]中看起来很混乱，因为我有多少项。你能解释一下，如果我在[]中有一个元组，我会怎么做吗？'A1'：['red'：'dark'，'pink'：'light']？我已经实现了你的方法，但是选项没有显示为什么ng选项比ng repeat好。您还可以演示如何根据以前的下拉列表实际进行动态下拉吗？您可以使用ng change。创建一个函数并在ng change上调用此函数，然后在此函数中执行rest。我想这是有道理的。当angular有指令ng选项时，为什么要使用间接机制ng repeat。

ng选项

还允许您使用非字符串值类型。@Lex您能解释一下非字符串值类型的含义吗？为什么ng repeat不能这样做？为什么ng选项比ng repeat更好。您还可以演示如何根据以前的下拉列表实际进行动态下拉吗？您可以使用ng change。创建一个函数并在ng change上调用此函数，然后在此函数中执行rest。我想这是有道理的。当angular有指令ng选项时，为什么要使用间接机制ng repeat。

ng选项

还允许您使用非字符串值类型。@Lex您能解释一下非字符串值类型的含义吗，为什么ng repeat不能这样做