添加 ng-if 后，我无法从 html 检索数据到控制器

Question

在这里，在 Ionic 中，我使用 ng-if 每页显示 4 个输入框，单击下一步将显示接下来的 4 个文本框。但是，如果添加了 ng-if，则 ng-model 无法选取值。否则它完全可以正常工作。如何替换 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>

Answer 1

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

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

这就是你应该使用 controller as syntax 的原因：

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

您可以使用 $scope.$parent，但这太可怕了。

如果您要 ng-if 的替代品，请尝试 ng-switch。 The easily navigable Documentation here

文档中的示例：

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

Answer 2

我会考虑将每个部分包装在 <fieldset> 而不是 <div> 中，因为您可以禁用字段集，这将禁用其中的所有控件。然后你可以使用 ng-show 和 ng-disabled

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

或者将表单的每个部分放在它自己的路径中

Answer 3

ng-if 指令创建一个新范围，这可能会导致您的 regSale 属性在子范围而不是控制器范围上分配和定义。引自 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.

因此，当用户输入绑定到 regSale.city 时，Angular 所做的实际上是 childScope.regSale = {}; childScope.regSale.city = "some random city"; 而不是 controllerScope.regSale.city = "some random city";。结果，三种不同的形式中的每一种都有自己的范围 regSale，并且控制器范围留空。

要解决此问题，您可能需要在控制器中定义 regSale：

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

然后 childScope.regSale 将与 $scope.regSale 完全相同，因为范围继承。因此，分配将命中相同的 regSale 对象并按预期工作。

有关详细信息，请阅读 Angular wiki 中的 Understanding Scopes 部分。它有点长，但包含大量示例和图表，可帮助您理解作用域和继承的概念。

添加 ng-if 后，我无法从 html 检索数据到控制器

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

angularjs

ionic-framework

ionic