Угловой вид JS не обновляется должным образом

Question

Это мой первый день углового JS, так что я новичок, я прошу объяснений о поведении, которое я не понимаю. Я пытаюсь построить форму, которая состоит из "панелей". каждая панель содержит несколько элементов формы (флажок, радиогруппа и т. д.) или сообщение. В начале видна только первая панель. Каждый раз, когда пользователь совершает "действие" (что-то проверяет, что-то выбирает). Панель появляется (иногда больше) на основе предыдущего выбора и других данных.

Каждый элемент формы имеет свою модель внутри контроллера. Каждая панель имеет директиву ngShow и функцию в контроллере, которая возвращает информацию о том, должна ли эта панель отображаться. Вот небольшая выдержка из моего кода для двух панелей:

Первая панель (панель ROOT всегда отображается)

                <div class="panel panel-default" data-ng-show="true">
                <div class="panel-heading">
                    <h3 class="panel-title">PLP</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="col-xs-offset-0 col-xs-10">
                            <div class="radio">
                                <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp1"> PLP 1</label>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp2"> PLP 2</label>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp3"> PLP3</label>
                            </div>
                        </div>
                    </div>
                    <p> {{choixPlp}} </p>
                </div>
            </div>

Вторая панель

                <div class="panel panel-default"
                data-ng-show="fmotifRetourCommentaires()">
                <div class="panel-heading">
                    <h3 class="panel-title">Dépot</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="col-xs-offset-0 col-xs-10">
                            <label> Motif Retour : {{motif}} </label>
                            <p>Commentaires</p>
                            <div class="textarea"></div>
                            <textarea rows="" cols=""></textarea>
                            <br />
                            <button type="submit" class="btn btn-default">Déposer</button>

                        </div>
                    </div>
                </div>
            </div>

App.js

var app = angular.module('dynamicForm', []);
app.controller('MainCtrl', function($scope) {

    $scope.choixPlp;
    $scope.motif;

    $scope.fmotifRetourCommentaires = function() {
        if ($scope.choixPlp == "plp1") {
            $scope.motif = "Degroupage Abusif";
            return true;
        }
        if ($scope.choixPlp == "plp2") {
            $scope.motif = "Deconstruction a tort";
            return true;
        }
        return false;
    };
});

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

setInterval(function() {
    $scope.$apply()
}, 500)

Answer 1

Причина, по которой он работает не при первом щелчке, а при втором щелчке, заключается в том, что модель не устанавливается до тех пор, пока радиокнопка не потеряет фокус (я думаю, что последовательность просмотра и обновления по какой-то причине неправильная)

Поскольку вы хотите выполнить какое-либо действие, основанное на значении choixPlp, вы можете рассмотреть возможность установки наблюдения для этой переменной. Я немного изменил ваш код и использовал переменную show_panel_2, и этот флаг устанавливается или сбрасывается в зависимости от функции в watch.

           <div class="panel panel-default"
        data-ng-show="show_panel_2">
        <div class="panel-heading">
            <h3 class="panel-title">Dépot</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <div class="col-xs-offset-0 col-xs-10">
                    <label> Motif Retour : {{motif}} </label>
                    <p>Commentaires</p>
                    <div class="textarea"></div>
                    <textarea rows="" cols=""></textarea>
                    <br />
                    <button type="submit" class="btn btn-default">Déposer</button>

                </div>
            </div>
        </div>
    </div>

<script>
var app = angular.module('dynamicForm', []);
app.controller('MainCtrl', function($scope) {

    $scope.choixPlp;
    $scope.motif;

    $scope.show_panel_2 = false;

    $scope.$watch('choixPlp', function() {
        if ($scope.choixPlp == "plp1") {
            $scope.motif = "Degroupage Abusif";
            $scope.show_panel_2 = true;
            return;
        }
        if ($scope.choixPlp == "plp2") {
            $scope.motif = "Deconstruction a tort";
            $scope.show_panel_2 = true;
            return;
        }

        $scope.show_panel_2 = false;
    });

});
</script>