After adding ng-if, I'm not able to retrive data from html to controller

Question

Here, In Ionic, I've used ng-if to display 4 input boxes per page and clicking next will display the next 4 text boxes. However ng-model fails to pick value if ng-if is added. Othwerwise it perfectly works fine. How to substitute ng-if?

 <div class="list">
        <div ng-if="form1">
        <label class="item item-input">
          <span class="input-label" style="font-size:13px">BILL NO</span>
          <input type="text" ng-model="regSale.billNo">
        </label>
        <label class="item item-input">
          <span class="input-label" style="font-size:13px">BILL DATE</span>
          <input type="text" ng-model="regSale.billDate">
        </label>
        <label class="item item-input">
          <span class="input-label" style="font-size:13px">CUSTOMER NAME</span>
          <input type="text" ng-model="regSale.custName">
        </label>
        <label class="item item-input">
          <span class="input-label" style="font-size:13px">STATE</span>
          <input type="text" ng-model="regSale.state">
        </label>
        <button class="button icon button-block button-royal" ng-click="callForm2()">Next</button>
      </div>
    </div>

     <div ng-if="form2">
            <label class="item item-input">
              <span class="input-label" style="font-size:13px">DISTRICT</span>
              <input type="text" ng-model="regSale.district">
            </label>
            <label class="item item-input">
              <span class="input-label" style="font-size:13px">HOUSE NO.</span>
              <input type="text" ng-model="regSale.houseNo">
            </label>
            <label class="item item-input">
              <span class="input-label" style="font-size:13px">STREET</span>
              <input type="text" ng-model="regSale.street">
            </label>
            <label class="item item-input">
              <span class="input-label" style="font-size:13px">TEHSIL</span>
              <input type="text" ng-model="regSale.tehsil">
            </label>
            <div class="row">
              <div class="col col-50">
                  <button class="button icon button-block button-calm" ng-click="callForm1()">Back</button>
              </div>
              <div class="col col-50">
                  <button class="button icon button-block button-royal" ng-click="callForm3()">Next</button>
              </div>
            </div>    
     </div>

      <div ng-if="form3"> 
            <label class="item item-input">
              <span class="input-label" style="font-size:13px" >CITY/TOWN</span>
              <input type="text" ng-model="regSale.city" >
            </label>
            <label class="item item-input">
              <span class="input-label" style="font-size:13px" >PINCODE</span>
              <input type="text"  ng-model="regSale.pincode">
            </label>     
            <label class="item item-input">
              <span class="input-label" style="font-size:13px">CONTACT</span>
              <input type="text"  ng-model="regSale.contact" >
            </label>            
            <label class="item item-input">
              <span class="input-label" style="font-size:13px">PRODUCT</span>
              <input type="text"  ng-model="regSale.product" >
            </label>
            <div class="row">
              <div class="col col-50">
                  <button class="button icon button-block button-calm" ng-click="callForm2()">Back</button>
              </div>

               <div class="col col-50">
                  <button class="button button-block button-positive" ng-click="signIn(regSale)">
                    Sign-In
                  </button>
                </div>
               </div>
        </div>

score 0 · Answer 1 · edited May 23 '17 at 11:59

Angularjs ng-model doesn't work inside ng-if

The ng-if directive, like other directives creates a child scope.

That's why you should use controller as syntax:

<div ng-controller="myCtrl as regSale>
    <div ng-if="form1>
        <input ng-model="regSale.billNo>
    </div>
</div>

You could use $scope.$parent, but that is horrendous.

If you are asking for a substitute for ng-if, try ng-switch. The easily navigable Documentation here

Example in docs:

<ANY ng-switch="expression">
  <ANY ng-switch-when="matchValue1">...</ANY>
  <ANY ng-switch-when="matchValue2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

score 0 · Answer 2 · answered Jan 04 '16 at 03:21

I would consider wrapping each section in <fieldset> rather than <div> because you can disable a fieldset and that will disable all controls within it. Then you can use ng-show and ng-disabled

 <fieldset ng-show="form1" ng-disabled="!form1">

Alternatively put each section of the form in it's own route

score 0 · Accepted Answer · answered Jan 04 '16 at 03:29

The ng-if directive creates a new scope, which may cause your regSale property to be assigned and defined on the child scope instead of the controller scope. Quote from the Angular ngIf docs:

The scope created within ngIf inherits from its parent scope using prototypal inheritance. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope.

Therefore, when user types in the input bind to regSale.city, what Angular does is effectively childScope.regSale = {}; childScope.regSale.city = "some random city"; instead of controllerScope.regSale.city = "some random city";. As a result, each of the three different forms has its own scope with its own regSale, and the controller scope is left empty.

To solve this problem, you may want to define the regSale in your controller:

// In controller.js:
$scope.regSale = {};
// You don't have to change the view HTML code.

And then childScope.regSale will be exactly the same as $scope.regSale because of scope inheritance. Therefore the assigns will hit the same regSale object and work as intended.

For more information, please read the Understanding Scopes section in Angular wiki. It is a little bit long, but contains a lot of examples and figures to help you understand the concepts with scopes and inheritance.

After adding ng-if, I'm not able to retrive data from html to controller

3 Answers3