AngularJS Соответствующая ng-модель для выбора и радио не синхронизируется - PullRequest
Новая
       15

AngularJS Соответствующая ng-модель для выбора и радио не синхронизируется

0 голосов
/ 15 января 2019

У меня проблема с моими моделями при попытке синхронизировать аналогичные функции с помощью выбора с помощью ng-options и радио с использованием ng-repeat. Модели и детали одинаковы, но они не синхронизируются должным образом, и я не знаю почему. Я пытался добавить $ 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>

Я надеюсь, что это что-то незначительное, что я пропускаю. Мы будем очень признательны за понимание того, что является причиной проблемы.

спасибо

1 Ответ

0 голосов
/ 15 января 2019

Ваша проблема в том, что ваш <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, так что это то, что привязано к вашей области видимости. Итак, выбор использовал объект, радио использовал строку. Я исправил это, обновив радио, чтобы просто использовать category в качестве значения: 

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

Вот рабочий планер .

...