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

Auto Insert data into fields angularjs

本文关键字:字段 angularjs 插入 数据      更新时间:2023-09-26

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

我尝试正常添加它并添加如下所示的只读属性:

    <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 中调用数据时,所有数据都被定义,我可以以其他方式使用该值,因此我知道我的问题在于输入字段,而不是数据的调用方式。

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>之间)