Question

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

与其他指令一样，ng-if指令创建子范围。

这就是为什么你应该使用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

docs中的示例：

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

在ngIf中创建的范围使用prototypal inheritance从其父范围继承。这一点的一个重要含义是，如果在ngIf中使用ngModel绑定到父作用域中定义的javascript原语。在这种情况下，对子作用域内的变量所做的任何修改都将覆盖（隐藏）父作用域中的值。

因此，当输入中的用户类型绑定到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转发到控制器

3 个答案: