Javascript 使用angular.js使用最后选定的值填充隐藏字段

所以，我有这个代码

在这段代码中，我只显示下一个下拉列表，如果所选项目有一个子数组。 现在，我想使用Angular.js用下拉链的最后一个选定值填充隐藏字段的值

换句话说，如果用户在最后出现的下拉列表中选择了一个选项，我希望最后的隐藏字段具有与表单一起提交的值

我如何才能做到这一点？

您可以使用：

<input type="hidden" name="selection" value="{{selectedSubSubItem.name}}">

如果你想回到链条中，这将很有帮助。但我强烈建议将此逻辑移到控制器：

<input type="hidden" name="selection" value="{{(selectedSubItem.subItems ? selectedSubSubItem.name : false) || (selectedItem.subItems ? selectedSubItem.name : false) || selectedItem.name}}">

---

如果链条的长度是固定的，则可以这样做：

<input type="hidden" name="selection"
    value="{{ (selectedSubSubItem || selectedSubItem || selectedItem).name }}"/>

参见分叉小提琴：

---

除了

ng更改

，您还可以在范围内使用手表；优点是手表只需知道其直接子女：

$scope.$watch("selectedItem", function(newval, oldval) {
    if( newval !== oldval ) $scope.selectedSubItem = null;
});
$scope.$watch("selectedSubItem", function(newval, oldval) {
    if( newval !== oldval ) $scope.selectedSubSubItem = null;
});

---

因为您对这种类型的“链式选择”感兴趣，所以需要使用一些更复杂的逻辑。 这是小提琴： 我使用了ng值，但您可以保留您的值并将其设置为

value="{{choiceValue()}}

这也会产生同样的效果。 我所做的是在一个数组中生成答案（

selectedItem=[]

），然后在执行过程中填充它（注意每个选择的

ng模型

）

在每次选择时，使用相应地更新

ng值的函数
choiceValue（）
，相应地更新值

通过这种方式，您可以向链中添加任意多个选项，只需更新它们的编号（实际上，您可以使用
ng repeat
，并使用
$index
自动创建更多选项级别）

这是一个多一点的工作，但你可以看到这里的基本知识：

这完全取决于执行此操作所需的复杂性/自动化程度：）
但这只会使用链的最后一个值填充隐藏字段。我想用用户最后选择的值填充隐藏字段。@user1706198好的，不清楚。但这很容易实现（请参见更新）。这在链中向前运行，但在向后运行时，它会被卡在最后一个值上。这很好，在链中向后运行时，它会工作，但如果我在最后一个选项上，并更改了第一个选项，它会再次被卡在，为了正常工作，我必须一个接一个地返回到链中。您是否实现了如上所述的
ng更改
，即更改第一个会使下两个无效，更改第二个会使第三个无效？在所提供的小提琴中，在选择所有方向后将第一个方向更改为第三个方向是正确的。手表也能用。如果我不了解您的问题，您尝试的具体步骤是什么？这是可行的，但由于某种原因，它无法显示链中的第三个下拉列表。这非常有用。但是为什么在第一把小提琴中，只有第二个下拉菜单出现，而没有第三个？我已经更新了小提琴。我的变量名有一个输入错误。这就是为什么使用ng repeat创建一系列选择可能非常方便的原因-键入的次数不多，因此打字的机会较少：）当选择最后一个项目“子项目2”并跳到链中的第一个下拉列表并选择“项目1”时，值会卡在“子项目2”上，第二个下拉列表也不会消失！！
<select ng-model="selectedItem" ng-options="i.name for i in items"
    ng-change="selectedSubItem=null;selectedSubSubItem=null"></select>

$scope.$watch("selectedItem", function(newval, oldval) {
    if( newval !== oldval ) $scope.selectedSubItem = null;
});
$scope.$watch("selectedSubItem", function(newval, oldval) {
    if( newval !== oldval ) $scope.selectedSubSubItem = null;
});

value="{{choiceValue()}}