如何拥有动态 show/hide & required/not 所需的控件 (angularjs)

Question

我试图让我的表单的动态部分从我从 http 调用（以及后来的 select）获得的值开始。表格应该是必需的。这意味着每一个输入都应该是必需的。当然，如果我检查的值不是 "right" ，则应隐藏部分表单并将输入设置为非必需（否则我无法保存数据）。

当第一个值到达时我已经这样做了（来自 http，我只是检查值并更改 show/hide & required/not 所需的部分），但我不能这样做a select（http 值和 select 非常相似，但 select 应该是完全动态的）。就是不明白为什么，机制应该是一模一样的。

这里是 html 部分：

这是静态值（来自 http 调用）

<div class="form-group col-sm-12">
    <label class="form-control-label">Classificazione 1</label>
    <br />
        {{picture.PictureClass.Class}}
</div>

其余

<span id="showDiv" ng-show = "false">
    <div class="row">
        <div class="form-group col-sm-12" ng-class="{ 'has-error' : formPicture.ReportingDetail.$invalid && formPicture.ReportingDetail.$touched}">
            <label for="ReportingDetail" class="form-control-label">Analisi Segnalazione</label>
                <select ng-disabled="accessLevelStatus() < 2" 
                        class="form-control" name="ReportingDetail"
                        id="ReportingDetail" placeholder="ReportingDetail"
                        ng-model="picture.ReportingDetail">
                    <option value=""></option>
                    <option value="Segnalazione ambientale">Segnalazione ambientale</option>
                    <option value="Segnalazione di sicurezza">Segnalazione di sicurezza</option>
                    <option value="Segnalazione strutturale">Segnalazione strutturale</option>
                </select>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-sm-12"  ng-class="{ 'has-error' : formPicture.Reason.$invalid && formPicture.Reason.$touched}">
                <label for="Reason" class="form-control-label">Motivazioni</label>
                <textarea ng-disabled="accessLevelStatus() < 2" id="Reason" 
                          class="form-control" name="Reason" 
                          ng-model="picture.Reason">
                </textarea>
          </div>
    </div>
</span>

这就是我的管理方式

    $scope.picture = ReportingPictureService.pictures.get({id: $stateParams.id}, function (picture) {
        $scope.title = 'Modifica segnalazione';
        $scope.picture.PictureDate = new Date($scope.picture.PictureDate);


        //Se la Classificazione 1 >= 3 (Segnalazione/Segnalazione urgente), allora mostro i campi associati alla segnalazione
        var div = angular.element('#showDiv');
        var reportingDetailInput = angular.element('#ReportingDetail');
        var reasonInput = angular.element('#Reason');

        //Se Classificazione 1 >= 3, allora gli input sono visibili e sono tutti required
        if($scope.picture.PictureClass_ID >= 3) {
            div.attr('ng-show',"true");
            reportingDetailInput.attr('required',"required");
            reasonInput.attr('required',"required");
        }
        else {
            div.attr('ng-show',"false");
            reportingDetailInput.attr('required',"false");
            reasonInput.attr('required',"false");
        }


        //Tengo conto anche di Classificazione 2 e uso le seguenti funzioni per modificare gli attributi degli input e dello span (show and hide)
        $scope.changeClass2 = function() {
            if(picture.PictureClass2_ID >= 3) {
                div.attr('ng-show',"true");
                reportingDetailInput.attr('required',"required");
                reasonInput.attr('required',"required");
            }
            else {
                div.attr('ng-show',"false");
                reportingDetailInput.attr('required',"false");
                reasonInput.attr('required',"false");
            }
        }

        //Funzione che gestisce lo show/hide dei due input
        $scope = div.scope();
        $injector = div.injector();
        $injector.invoke(function($compile) {
            $compile(div)($scope)
        });

        //Funzione che gestisce il required = true/false del campo Analisi Segnalazioni
        $scope = reportingDetailInput.scope();
        $injector = reportingDetailInput.injector();
        $injector.invoke(function($compile) {
           $compile(reportingDetailInput)($scope)
        });

        //Funzione che gestisce il required = true/false del campo Motivazioni
        $scope = reasonInput.scope();
        $injector = reasonInput.injector();
        $injector.invoke(function($compile) {
           $compile(reasonInput)($scope)
        });

        downloadImage($scope.picture);
      })

当$scope.picture.PictureClass_ID >= 3 时，span 部分（show/hide 部分，http 静态值）应该是可见的（并且是必需的）。当然它应该是隐藏的（并且不是必需的）当 $scope.picture.PictureClass_ID < 3.

$scope.picture.PictureClass2_ID也是一样，不过应该是随select函数动态变化的。

第一部分工作正常，但 select 部分不工作。知道这是怎么行不通的吗？

Answer 1

不要使用控制器操纵 DOM 属性，而是使用 ng-show 和 ng-required 指令：

<select ng-disabled="accessLevelStatus() < 2" 
        class="form-control" name="ReportingDetail"
        id="ReportingDetail" placeholder="ReportingDetail"
        ng-model="picture.ReportingDetail"
        ng-show="picture.PictureClass_ID >= 3"
        ng-required="picture.PictureClass_ID >= 3" >
    <option value=""></option>
    <option value="Segnalazione ambientale">Segnalazione ambientale</option>
    <option value="Segnalazione di sicurezza">Segnalazione di sicurezza</option>
    <option value="Segnalazione strutturale">Segnalazione strutturale</option>
</select>

有关详细信息，请参阅

AngularJS ng-required Directive API Reference

如何拥有动态 show/hide & required/not 所需的控件 (angularjs)

How to have a dynamic show/hide & required/not required control (angularjs)

html

validation

angularjs

angularjs-scope