Question

我想将数据插入到一个表的某些输入字段中，以便从其他输入字段（手动填充）中为另一个表添加更多信息。

我尝试正常添加并添加如下的只读属性：

    <label class="item item-input" >
             <span class="input-label">Make</span>
             <input type="text" ng-model="M1" ng-required readonly>{{Details[0].Make}}</input>
                </label>

但数据被推到一边，我仍然需要ng-required才能继续。

然后我尝试Ion-Item，我觉得效果更好，但我的数据未定义。

HTML

  <ion-content ng-controller="clearCheckinCtrl"  class="Cloginback" ng-init="TruckDetailData(TruckID)"> <!-- -->
    <form name="commentForm" novalidate method="post">
      <ion-item>
        <div class="row">
             <div class="col Cborder-item"><h2>Make:</h2></div>
             <div class="col Cborder-item" ng-model="M1" ng-value="{{Details[0].Make}}">{{Details[0].Make}}</div><!--{{Details[0].Make}}-->
        </div>
      </ion-item>
      <ion-item class="Cborder">
        <div class="row">
             <div class="col Cborder-item"><h2>Model:</h2></div>
             <div class="col Cborder-item" ng-model="M2" ng-value="{{Details[0].Model}}"><h2 >{{Details[0].Model}}</h2></div><!--{{Details[0].Model}}-->
        </div>
      </ion-item>
      <ion-item class="Cborder">
        <div class="row">
             <div class="col Cborder-item"><h2>Supplier:</h2></div>
             <div class="col Cborder-item" ng-model="M3" ng-value="{{Details[0].Supplier}}"><h2>{{Details[0].Supplier}}</h2></div><!--{{Details[0].Supplier}}-->
        </div>
      </ion-item>
      <ion-item class="Cborder">
        <div class="row">
             <div class="col Cborder-item"><h2>RTB No:</h2></div>
             <div class="col Cborder-item" ng-model="M4" ng-value="{{Details[0].RTBNum}}"><h2>{{Details[0].RTBNum}}</h2></div><!--{{Details[0].RTBNum}}-->
        </div>
      </ion-item>
      <ion-item class="Cborder">
        <div class="row">
             <div class="col Cborder-item"><h2>Keys:</h2></div>
             <div class="col Cborder-item" ng-model="M5" ng-value="{{Details[0].Keys}}"><h2>{{Details[0].Keys}}</h2></div><!--{{Details[0].Keys}}-->
        </div>
      </ion-item>
      <ion-item class="Cborder">
        <div class="row">
             <div class="col Cborder-item"><h2>Job No:</h2></div>
             <div class="col Cborder-item" ng-model="M6" ng-value="{{Details[0].JobNum}}"><h2>{{Details[0].JobNum}}</h2></div><!--{{Details[0].JobNum}}-->
        </div>
      </ion-item>
      <ion-item class="Cborder">
        <div class="row">
             <div class="col Cborder-item"><h2>Reg No:</h2></div>
             <div class="col Cborder-item" ng-model="M7" ng-value="{{Details[0].RegNum}}"><h2>{{Details[0].RegNum}}</h2></div><!--{{Details[0].RegNum}}-->
        </div>
      </ion-item>
      <ion-item class="Cborder">
        <div class="row">
             <div class="col Cborder-item"><h2>Chassis/Vin No:</h2></div>
             <div class="col Cborder-item" ng-model="M8" ng-value="{{Details[0].ChassisNum}}"><h2>{{Details[0].ChassisNum}}</h2></div><!--{{Details[0].ChassisNum}}-->
        </div>
      </ion-item>
            <div class="list">
              <label class="item item-input item-select">
                <div class="input-label">
                  Tyre Make: 
                </div>
                <select  ng-model="M9" required>
                        <option>Dunlop</option>
                        <option>Good Year</option>
                        <option>Firestone</option>
                        <option>Michelin</option>
                        <option>Bridgestone</option>
                </select>
              </label>        
              <label class="item item-input item-select">
                <div class="input-label">
                  Tyre Quantity:
                </div>
                <select  ng-model="M10" required>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                </select>
              </label>        
              <label class="item item-input item-select">
                <div class="input-label">
                  Bull Bar:
                </div>
                <select  ng-model="M11" required>
                        <option>Yes</option>
                        <option>No</option>
                </select>
              </label>            
               <label class="item item-input item-select">
                <div class="input-label">
                  Body Check:
                </div>
                <select  ng-model="M12" required>
                        <option>Yes</option>
                        <option>No</option>
                </select>
              </label>            

                 <label class="item item-input item-select">
                    <div class="input-label">
                      New Truck / Repair:
                    </div>
                    <select  ng-model="M13" required>
                      <option>New</option>
                      <option>Repair</option>
                    </select>
                 </label>
                <div class="padding">
                    <button type="button" class="button button-block button-balanced" ng-disabled="commentForm.$invalid" 
                        ng-click="submitForm(M1, M2, M3, M4, M5, M6, M7, M8, M9, M10, M11, M12, M13); postComments(M1, M2, M3, M4, M5, M6, M7, M8, M9, M10, M11, M12, M13)">
                        Next
                    </button>
                </div>
                </div>
                </form>
                  </ion-content>

在我的Angularjs中调用数据时，所有数据都已定义，我可以通过其他方式使用该值，因此我知道我的问题在于输入字段而不是数据的调用方式。

Answer 1

input元素的内容只应与ng-model绑定到您的控制器。

尝试以下方法：

<label class="item item-input" >
    <span class="input-label">Make</span>
    <input type="text" ng-model="Details[0].Make" ng-required readonly>
</label>

请记住，您不需要在ng-表达式中使用双花括号，即ng-model="{{Details[0].Make}}"错误。此外，input元素的值应在其value属性中指定，而不是作为其子元素（在<input></input>之间）

自动将数据插入到angularjs字段中

1 个答案: