angularangularjsangular-ng-if

Making an if statement with currently selected option


I have the following drop-down list on my angular JS page:

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

These are the options for the above drop-down:

                    Test1
                    Test12
                    Test14
                    Test18
                    Test25
                    
                    and so on

Based on whatever selection, user makes, in the above, Action, drop-down list, I want to change the ng-model of another control on the same page:

this is another control:

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

In the Action drop-down, if the user selects "Test1" then I want the ng-model to be:

Data.EmailInput.To

but if the user selects "Test18" or "Test25" from the Action drop-down then I want the ng-model to be:

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>

Is it possible to do something on the angularJs HTML page.I tried doing something like this:

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

so if the user selects "Test1" from the drop down then I want to display :

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

else if the user selects "test18" or "test25" then I want to display:

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

I am very new to angularJs. Any help on this will be greatly appreciated.


Solution

  • I don't really understand what Data is in this context, I hope it's an as syntax for controller $scope. Anyway, here is a working example for your reference. We can just do a equality check for test 1 value, then we can use the array includes method to check if its one of multiple values, test 18 and test 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>