Question

所以，我有这段代码Fiddle

<div ng-app="testApp">
<div ng-controller="MainCtrl">
    <form>
        <p>
            <select ng-model="selectedItem" ng-options="i.name for i in items"></select>
        </p>
        <p ng-show="selectedItem.subItems">
            <select ng-model="selectedSubItem" ng-options="i.name for i in selectedItem.subItems"></select>
        </p>

        <p ng-show="selectedSubItem.subItems">
            <select ng-model="selectedSubSubItem" ng-options="i.name for i in selectedSubItem.subItems"></select>
        </p>

        <input type="hidden" name="selection" value="????">

        <input type="submit" value="submit">
    </form>

</div>

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

换句话说，如果用户在出现的最后一个下拉列表中选择一个选项，我希望最后的隐藏字段能够使用表单提交该值。

我该怎么做？

Answer 1

您可以使用：

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

一旦相应的select的值发生变化，双向绑定将更新隐藏输入的值。

如果您想根据上次选择动态获取它：

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

如果您希望能够回到链中，这将有所帮助。但我强烈建议将此逻辑移至控制器：

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

Answer 2

如果链的长度是固定的，这可能会这样做：

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

为了解决向后转到链的问题，一个简单的解决方案是使用ng-change并使所有下一个值无效，即：

<select ng-model="selectedItem" ng-options="i.name for i in items"
    ng-change="selectedSubItem=null;selectedSubSubItem=null"></select>

请参阅分叉小提琴：http://jsfiddle.net/zH77p/1/

除ng-change外，您可以在范围内使用手表;优点是手表只需要知道他们的直接孩子：

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

Answer 3

由于您对这种类型的链式选择＆＃34;感兴趣，因此您需要使用一些更复杂的逻辑。这是小提琴：http://jsfiddle.net/2Az4P/3/ 我使用了ng-value，但您可以保留您的值并将其设置为

value="{{choiceValue()}}

会产生同样的效果。我所做的是在一个数组（selectedItem = []）中做出答案，然后在我继续时填充它（注意每个选择的ng-model）。

在每个选择中，值会相应地使用choiceValue()函数进行更新，该函数会相应地更新ng-value。

这样，您可以向链中添加任意数量的选择，只需更新其编号（实际上，您可以使用ng-repeat进行此操作，并使用$index自动创建更多选项级别）

它还有一些工作，但你可以在这里看到基础知识： http://jsfiddle.net/brendanowen/uXbn6/8/

这完全取决于你需要做多少复杂/自动化：）

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

3 个答案: