角度形式的错误下拉选择框

时间:2016-07-11 08:47:40

标签: javascript jquery angularjs angularjs-directive frontend

我正在处理一个有角度的形式,需要解决一个错误。

问题在于:

1) - 选择类型:value-1

2) - 选择Data-1:All Data-1

3) - 选择Data-2:All Data-2

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

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

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

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

我不想在这里找到这个空白区域......

反而应该回到 - 选择一个 - 再次...

我附上截图和代码......请看一下。

Screenshot

<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>

1 个答案:

答案 0 :(得分:2)

在“类型”下拉菜单的更改事件中,您需要指定$scope.newAlert.site = '';$scope.newAlert.asset = '',因为“选择一个”选项的值为空字符串(“”)。