Авто Вставить данные в поля angularjs

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