Question

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

基本上，我想做的是基于顶级选择（类别），根据所选的父项显示子项（描述）。选择单选选项后，您会看到模型将失败。

这里有个小例子来说明这个问题： 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，其内容为“将类别对象存储在我的范围内，并使用tagCategoryName作为类别中每个类别的显示名称”

对于您的收音机，您将category as category.tagCategoryName for category in categories设置为ng-value字符串，这就是绑定到示波器的范围。因此，选择使用对象，单选使用字符串。我通过更新收音机以将category.tagCategoryName用作值来解决此问题：

category

Here's the working plunkr。

Select和Radio不同步的AngularJS匹配ng模型

1 个答案: