自动将数据插入到字段中angularjs
Auto Insert data into fields angularjs
我想将数据插入到一个表的某些输入字段中,以便从其他输入字段(手动填充)为另一个表添加更多信息。
我尝试正常添加它并添加如下所示的只读属性:
<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>
之间)
相关文章:
- 使用angularjs列出JSON中的字段值
- 如何创建具有默认值的JavaScript对象字段?(AngularJS模型相关)
- 飞行前响应中的访问控制允许标头不允许Angularjs请求标头字段访问控制允许标题
- 如何在angularjs中传递对象字段作为指令参数
- 同一页面上两个不同控制器的Angularjs双向绑定字段
- angularjs在数字(html5)字段中将0转换为1
- AngularJS-工厂中promise ID字段的返回值
- 从父元素AngularJS中获取多个输入字段的值
- AngularJs:在数字输入字段中设置验证的条件最小值和最大值
- Angularjs 通过选择不同选择框中的两个字段来填充选择框
- AngularJS:必需属性适用于某些字段,但不适用于其他字段
- 如何更新 angularjs ng-cell 中的字段
- AngularJS:在控制器中过滤除一个字段外的所有字段
- angularjs用于生日字段的循环
- AngularJs的Kendo UI:当用户在网格中选择行时,如何在文本框字段上绑定数据
- 更新其中一个字段时刷新其他输入字段.使用Angularjs(附Plunker)
- AngularJS从隐藏字段中计算字段
- AngularJS$http:发送消息忽略字段
- 减少Ctrl中的开关语句为禁用输入字段(AngularJS)
- 在设置清除输入字段AngularJS时有问题