在我的棱角分明的JS页面上有以下下拉列表:

<div class="col-md-4 fieldMargin">
                        <div class="dropdownIcon">
                            <select name="actions" id="actions"
                                    ng-init="Data.formStatus.Action=Data.Actions[0]"
                                    ng-options="option.Value for option in Data.Actions"
                                    ng-focus="ActionsLabel = true" ng-blur="ActionsLabel = false;"
                                    ng-model="Data.formStatus.Action"
                                  
                           ></select>
                            <label for="actions" class="labelColor"
                                   ng-class="{'dropdownLabelFloat' : (ActionsLabel || Data.formStatus.Action != null), 'dropdownLabel' : !ActionsLabel && !Data.formStatus.Action  }">
                                Action
                            </label>
                        </div>
                    </div>

以下是上述下拉列表的选项:

                    Test1
                    Test12
                    Test14
                    Test18
                    Test25
                    
                    and so on

根据用户在上面的操作下拉列表中所做的任何 Select ,我想要更改同一页上另一个控件的ng模型:

这是另一个控件:

<div class="col-md-12 inputEmailSection">
                            <input type="text" name="to" id="to"
                                   ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
                                   ng-model="Data.EmailInput.To" />
                            <label for="to" class="labelColor"
                                   ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
                                To
                            </label>
                        </div>
                    

在操作下拉列表中,如果用户 Select "Test1",则我希望ng-Model为:

Data.EmailInput.To

但是如果用户从Action下拉列表中 Select "Test18"或"Test25",那么我希望ng模型为:

Data.EmailInput.ToSpecialCase



 <div class="col-md-12 inputEmailSection">
                            <input type="text" name="to" id="to"
                                   ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
                                   ng-model="Data.EmailInput.ToSpecialCase" />
                            <label for="to" class="labelColor"
                                   ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
                                To
                            </label>
                        </div>

我可以在angularJs的HTML页面上做一些事情吗?我试过这样做:

<div ng-if={{Data.formStatus.Action}} = "Test1" >
                           
                      <div class="col-md-12 inputEmailSection">
                            <input type="text" name="to" id="to"
                                   ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
                                   ng-model="Data.EmailInput.To" />
                            <label for="to" class="labelColor"
                                   ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
                                To
                            </label>
                        </div>
                </div>
                        
                     <div ng-else-if="Test18" or "Test25">
                                  <div class="col-md-12 inputEmailSection">
                            <input type="text" name="to" id="to"
                                   ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
                                   ng-model="Data.EmailInput.ToSpecialCase" />
                            <label for="to" class="labelColor"
                                   ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
                                To
                            </label>
                        </div>

                      </div>

因此,如果用户从下拉列表中 Select "Test1",那么我想显示:

  <div class="col-md-12 inputEmailSection">
                            <input type="text" name="to" id="to"
                                   ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
                                   ng-model="Data.EmailInput.To" />
                            <label for="to" class="labelColor"
                                   ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
                                To
                            </label>
                        </div>
                </div>

否则,如果用户 Select "Test18"或"Test25",我想要显示:

<div>       
      <div class="col-md-12 inputEmailSection">
                        <input type="text" name="to" id="to"
                               ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
                               ng-model="Data.EmailInput.ToSpecialCase" />
                        <label for="to" class="labelColor"
                               ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
                            To
                        </label>
                    </div>

我对angularJs还是个新手.在这方面的任何帮助都将不胜感激.

推荐答案

我真的不明白在这个上下文中Data是什么,我希望它是控制器$Scope的as语法,无论如何请找到下面的工作例子供你参考,我们可以只做一个测试1值的相等判断,然后我们可以使用数组includes方法来判断它是否是多个值之一,测试18和测试25

function Channels($scope) {
  $scope.ActionsLabel = false;
  $scope.Actions = [{
      Value: 'Test1'
    },
    {
      Value: 'Test18'
    },
    {
      Value: 'Test25'
    },
  ];
  $scope.formStatus = {
    Action: '',
  };
  $scope.EmailInput = {
    To: '',
    ToSpecialCase: '',
  };
}

angular.module('app', [])
  .controller('Channels', Channels);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Channels">
  <div class="col-md-4 fieldMargin">
    <div class="dropdownIcon">
      <select name="actions" id="actions" ng-init="formStatus.Action=Actions[0]" ng-options="option.Value for option in Actions" ng-focus="ActionsLabel = true" ng-model="formStatus.Action"></select>
      <label for="actions" class="labelColor">
        Action
      </label>
    </div>
  </div>

  <div ng-if="formStatus.Action.Value == 'Test1'">
    <div class="col-md-12 inputEmailSection">
      <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="EmailInput.To" placeholder="to" />
      <label for="to" class="labelColor">
        To
      </label>
    </div>
  </div>

  <div ng-if="['Test18', 'Test25'].includes(formStatus.Action.Value)">
    <div class="col-md-12 inputEmailSection">
      <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="EmailInput.ToSpecialCase" placeholder="ToSpecialCase" />
      <label for="to" class="labelColor">
        To
      </label>
    </div>

  </div>

</div>

Angular相关问答推荐

Angular 17自定义指令渲染不起作用'

身份验证卫士给了我17个Angular 的任何类型

Angular 信号 - 使用 mutate() 与使用 forEach() react 性

Angular 15 在 URL 中使用@进行路由

Observable转换为Observable

如何在 Angular 中创建通用的可重用组件

如何以Angular 改变环境

绑定 Angular material Select 列表

找不到模块'webpack'

Angular CLI 自定义 webpack 配置

Angular Material 模态对话框周围的空白

angular 2 http withCredentials

Angular 5 响应式表单 - 单选按钮组

Angular 2 应用程序中没有Access-Control-Allow-Origin标头

Angular 2 - 全局 CSS 文件

Angular 2:formGroup 需要一个 FormGroup 实例

Angular 2+ ngModule 中导入/导出的作用

升级到 angular-6.x 会给出Uncaught ReferenceError: global is not defined

Hot and Cold observables:有 hot和 cold运算符吗?

如何对 *ngFor 应用数量限制?