0

这是我使用 Angular 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>

应用程序.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;
    };
});

我的问题是，当我在第一个面板上更改我的选择时，视图不显示第二个面板中变量“motif”的值不会改变。只有当我在新选项上单击两次时它才会改变。我确实添加了这部分代码并且它可以工作，但我不明白为什么......

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

1 回答 1

0

它在第一次点击时不起作用但在第二次点击时不起作用的原因是因为在您单选按钮失去焦点之前模型没有设置（我认为观看和刷新的顺序由于某种原因不合适）

由于您想根据 choixPlp 的值执行一些操作，因此可以考虑在该变量上设置监视。我稍微修改了您的代码并使用了变量 show_panel_2，并且该标志会根据手表中的功能设置或取消设置。

           <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>
于 2014-07-10T15:58:09.617 回答