AngularJS 匹配 ng-model 用于 Select 和 Radio 不同步

Question

在尝试使用带有 ng-options 的 select 和使用 ng-repeat 的 radio 同步类似功能时，我的模型出现问题。模型和细节都是一样的，但是它们没有正确同步，我不知道为什么。根据 Stack 上的类似帖子，我尝试将 $parent 添加到收音机，但这也不起作用。

基本上我要做的是基于顶级选择（类别），根据选择的父项显示子选项（描述）。您可以看到，一旦您选择了单选选项，模型就会失败。

这里有一个 plunker 来说明这个问题： https://plnkr.co/edit/oP0LUEk5u70kLVsM?preview

这是我的控制器：

$scope.selection = {};

$scope.tagCategories = [
    {
        id: 1,
        tagCategoryName: "Payor Issues"
    }, {
        id: 2,
        tagCategoryName: "Technical Issues"
    }, {
        id: 3,
        tagCategoryName: "Special Project Tags"
    }
];

$scope.tagDescriptions = [
    {
        id: 1,
        tagDescriptionName: "Payor Issue 1",
        tagCategoryId: 1
    }, 
    {
        id: 2,
        tagDescriptionName: "Payor Issue 2",
        tagCategoryId: 1
    }, 
    {
        id: 3,
        tagDescriptionName: "Technical Issue 1",
        tagCategoryId: 2
    },
    {
        id: 4,
        tagDescriptionName: "Technical Issue 2",
        tagCategoryId: 2
    }, 
    {
        id: 5,
        tagDescriptionName: "Special Project 1",
        tagCategoryId: 3
    }
];

$scope.selection.category = $scope.tagCategories[1];
$scope.categories = $scope.tagCategories;

$scope.descriptionsForCategory = function(category) {
    if (category) {
        return $scope.tagDescriptions.filter(function (s) {
            return s.tagCategoryId == category.id;
        });
    }
    return [];
};

关联的 HTML：

<div class="form-group">
                <label class="control-label">Category</label>
                <!-- NG-MODEL USING SELECT OPTION -->
                <select name='category' class="form-control" ng-model="selection.category" ng-options="category as category.tagCategoryName for category in categories"
                 required>
            <option value="" disabled>Select</option>
        </select>
                    <ul>
                        <!-- NG-MODEL USING NG-REPEAT RADIOS -->
                        <li ng-repeat="category in categories">
                            <div class="radio">

                                <input type="radio" name='category' ng-model="selection.category" id="category{{category.id}}" ng-value="category.tagCategoryName">
                                <label for="category{{category.id}}">{{category.tagCategoryName}}</label>
                            </div>

                        </li>
                    </ul>
            </div>
            <div class="form-group">
                <label for="description" class="control-label">Description</label>
                <select name='description' required id="description" class="form-control" ng-disabled="descriptions.length == 0" ng-model="selection.description" ng-options="description as description.tagDescriptionName for description in descriptionsForCategory(selection.category)">
            <option value="" disabled>Select</option>
        </select>
                    <ul>
                        <li ng-repeat="description in descriptionsForCategory(selection.category)" ng-model="selection.description">
                            {{description.tagDescriptionName}}
                        </li>
                    </ul>

            </div>

我希望这是我忽略的小事。任何有关导致问题的原因的见解将不胜感激。

谢谢

Answer 1

您的问题是您的<select/> 正在存储category 对象，而您的<input type="radio"> 正在存储category.tagCategoryName 字符串：

<select name='category' class="form-control" ng-model="selection.category" ng-options="category as category.tagCategoryName for category in categories"
             required>
        <option value="" disabled>Select</option>
</select>

<input type="radio" name='category' ng-model="selection.category" id="category{{category.id}}" ng-value="category.tagCategoryName">

在ng-options 中，您有category as category.tagCategoryName for category in categories，它表示“将类别对象存储在我的范围内，并使用 tagCategoryName 作为类别中每个类别的显示名称”

对于您的收音机，您将ng-value 设置为category.tagCategoryName 字符串，这就是get 绑定到您的范围的内容。所以，select 使用了对象，radio 使用了字符串。我通过更新收音机来解决这个问题，只使用category 作为值：

<input type="radio" name='category' ng-model="selection.category" id="category{{category.id}}" ng-value="category">

Here's the working plunkr.