AngularJS Select 的匹配 ng-model 和无线电不同步

Question

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

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

这里有一个 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，表示 "Store the category object on my scope, and use the tagCategoryName as the display name for each category in categories"

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

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

Here's the working plunkr.

AngularJS Select 的匹配 ng-model 和无线电不同步

AngularJS Matching ng-model for Select and Radio not Syncing

angularjs

angularjs-ng-model