CODEWITHSUNDEEP
javascripthtmlangularjs
Mark
Mark

Reputation: 1872

Check if any of angular inputs have input

So I am trying to see if a series of inputs has data and if so, output that elsewhere. I have applied an ng-model to a div that has these inputs, but not getting the results I am after.

My code for input:

<div class="benefits" ng-model="benefits">          
    <input type="text" class="form-control" ng-model="benefit1" placeholder="benefit 1" style="font-size:18px; margin-bottom: 25px;">
    <input type="text" class="form-control" ng-model="benefit2" placeholder="benefit 2" style="font-size:18px; margin-bottom: 25px;">
    <input type="text" class="form-control" ng-model="benefit3" placeholder="benefit 3" style="font-size:18px; margin-bottom: 25px;">       
    <input type="text" class="form-control" ng-model="benefit4" placeholder="benefit 4" style="font-size:18px; margin-bottom: 25px;">
    <input type="text" class="form-control" ng-model="benefit5" placeholder="benefit 5" style="font-size:18px; margin-bottom: 25px;">   
</div>

And my output (that is not working correctly:

<ul class="outputText" ng-show="benefits != null">Perceived benefits:
    <li>{{ (benefit1 != null) ? benefit1 : '[describe benefit 1]' }}</li>
    <li>{{ (benefit2 != null) ? benefit2 : '[describe benefit 2]' }}</li>
    <li>{{ (benefit3 != null) ? benefit3 : '[describe benefit 3]' }}</li>
    <li>{{ (benefit4 != null) ? benefit4 : '[describe benefit 4]' }}</li>
    <li>{{ (benefit5 != null) ? benefit5 : '[describe benefit 5]' }}</li>
</ul>

If have the ng-model on the div isn't the way to go, how could I set a range of benefit1 through benefit5 for the output to show something in simplicity?

I am sure it is something simple that I am just not seeing?

Thanks much.

Upvotes: 0

Views: 46

Answers (1)

zero298
zero298

Reputation: 26877

Try using a <form> and using the $dirty property of the named form.

angular.module("MyApp", [])
  .controller("MyController", function() {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyController">

    <div class="benefits">
      <form name="benefits">
        <input type="text" class="form-control" ng-model="benefit1" placeholder="benefit 1" style="font-size:18px; margin-bottom: 25px;">
        <input type="text" class="form-control" ng-model="benefit2" placeholder="benefit 2" style="font-size:18px; margin-bottom: 25px;">
        <input type="text" class="form-control" ng-model="benefit3" placeholder="benefit 3" style="font-size:18px; margin-bottom: 25px;">
        <input type="text" class="form-control" ng-model="benefit4" placeholder="benefit 4" style="font-size:18px; margin-bottom: 25px;">
        <input type="text" class="form-control" ng-model="benefit5" placeholder="benefit 5" style="font-size:18px; margin-bottom: 25px;">
      </form>
    </div>

    <ul class="outputText" ng-show="benefits.$dirty">Perceived benefits:
      <li>{{ (benefit1) ? benefit1 : '[describe benefit 1]' }}</li>
      <li>{{ (benefit2) ? benefit2 : '[describe benefit 2]' }}</li>
      <li>{{ (benefit3) ? benefit3 : '[describe benefit 3]' }}</li>
      <li>{{ (benefit4) ? benefit4 : '[describe benefit 4]' }}</li>
      <li>{{ (benefit5) ? benefit5 : '[describe benefit 5]' }}</li>
    </ul>

  </div>
</div>

Upvotes: 3

Related Questions