javascript - Angular 形式下拉选择框中的错误

Question

我正在研究一个 Angular 形式，需要解决一个错误。

问题是这样的:

1)- 选择类型:值-1

2)- 选择数据-1:所有数据-1

3)- 选择 Data-2 : 所有 Data-2

4)- 现在将类型更改为:Value-2(而不是 value-1)。

data-1 和 data-2 字段应该消失。

5)- 现在再次选择类型为 value-1。

现在再次单击 data-1 或 data-2...您会看到一个空白区域 再次。

我不想这里有这个空的空间...

相反，它应该回到--选择一个-- 再次...

我正在附上屏幕截图和代码...请查看。

<form class="addAlert settings_form" ng-submit="createAlert(newAlert)">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Create a New Model</h4>
            </div>
            <div class="modal-body">
                <div class="form_fieldset">

                    <div class="form_item">
                        <label for="title">Name</label>
                        <input name="title" type="text" class="form-input title" required placeholder="Alert Name" ng-model="newAlert.title">
                        <div class="error"></div>
                    </div>


                    <div class="form_item">
                        <label for="alertformat">Type</label>
                        <select class="form-input alertformat"
                                name="alertformat" ng-model="newAlert.alertType"
                                ng-init="newAlert.alertType='Threshold'">
                            <option value="Threshold" selected>Value-1</option>
                            <option value="Pipeline Failure">Value-2</option>
                        </select>
                    </div>

                    <div class="form_item" ng-if="newAlert.alertType !='Pipeline Failure'">
                        <label for="alertformat">Data-1 </label>
                        <select class="form-input alertformat" name="alertformat"
                                ng-model="newAlert.site" required>
                            <option value="" disabled>-- Choose one --</option>
                            <option ng-value="-1">All Data-1</option>
                            <option ng-repeat="item in assetsData" ng-value="{{item.sitename}}">
                                {{item.sitename}}
                            </option>
                        </select>
                    </div>
                    <div class="form_item" ng-show="newAlert.site" ng-if="newAlert.alertType !='Pipeline Failure'">
                        <label for="alertformat">Data-2</label>
                        <select class="form-input alertformat" name="alertformat" ng-model="newAlert.asset" required>
                            <option value="" disabled>-- Choose one --</option>
                            <option ng-value="-1">All Data-2</option>
                            <option ng-repeat="item in assetsData | filter:newAlert.site" ng-value="{{item.sitename}}">
                                {{item.name}}
                            </option>
                        </select>
                    </div>

                    <div class="form_item">
                        <label for="alertformat">Color</label>
                        <div class="severity">
                        <input type="radio" class="radioBtnClass" name="numbers" value="Red"checked required>
                        <span>Red</span>
                        </input>

                        <input type="radio" class="radioBtnClass" name="numbers" value="Ember">
                        <span>Blue</span>
                        </input>
                         </div>
                    </div>

                    <div class="form_item">


                        <label for="users">Users</label>
                        <div class="user_select">
                              <span ng-repeat="user in userList" style="display:block">
                               <input class="alert_user_class" value="{{user.pk}}" type="checkbox">
                                {{user.email}}
                                  </input>
                              </span>
                        </div>


                    </div>

                </div>
            </div>

        </form>

Answer 1

在“类型”下拉列表发生更改事件时，您需要分配 $scope.newAlert.site = ''; 和 $scope.newAlert.asset = '' 因为“选择一个”选项的值为空字符串("")。