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

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

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

value="{{choiceValue()}}

这将具有相同的效果。 我所做的是将答案放在一个数组 (selectedItem = []) 中，然后在我进行时填充它（注意每个选择的 ng-model）。

在每次选择时，使用函数 choiceValue() 相应地更新值，该函数相应地更新 ng-value。

这样，您可以向链中添加尽可能多的选择，并且只需更新它们的数量（实际上，您可以为此使用ng-repeat，并使用$index 自动创建更多选择级别）。

还有一些工作要做，但您可以在此处查看基础知识： http://jsfiddle.net/brendanowen/uXbn6/8/

这完全取决于您需要执行此操作的复杂程度/自动化程度：)