我如何隐藏输入元素并将其值替换为表行,输入是使用 push
动态创建的,请参阅下面的代码:
查看
ID 喜欢用表行中的输入值替换输入
<tr class="odd gradeX" ng-repeat="choice in vm.choices">
<td><a href="" ng-click="vm.addNewChoice()">Add</a></td>
<td><a href="" ng-click="vm.saveChoice()">save</a></td>
<td>
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<td>
<div class="form-group">
<div class="input-group">
<select data-ng-options='t.value as t.label for t in vm.invoice_item_type' ng-model="choice.item_type" >
</select>
</div>
</div>
</td>
Controller
vm.choices = [];
vm.addNewChoice = function() {
var newItemNo = parseInt(vm.choices.length+1);
vm.choices.push({});
};
vm.saveChoice = function() {
var lastItem = vm.choices.length-1;
------ What to do here ------
};
最佳答案
好吧,最简单的方法可能是这样的:
- 向每个选择对象添加附加字段,说明是否已保存
- 添加两个
<td>
s 用于每种选择,一种是纯文本,一种是输入,并根据额外参数的值显示/隐藏它们。
类似这样的事情:
<tr class="odd gradeX" ng-repeat="choice in vm.choices">
<td><a href="" ng-click="vm.addNewChoice()">Add</a></td>
<td><a href="" ng-click="vm.saveChoice(choice)">save</a></td>
<td ng-hide="choice.saved">
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<td ng-show="choice.saved">
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="Item Name" class="form-control" ng-model="choice.item_name"/>
</div>
</div>
</td>
<!-- rest of your row goes here -->
</tr>
在 Controller 中:
vm.choices = [];
vm.addNewChoice = function() {
var newItemNo = parseInt(vm.choices.length+1);
vm.choices.push({}); // we don't need to set `saved` property explicitly since undefined will be resolved to false
};
vm.saveChoice = function(choice) {
var lastItem = vm.choices.length-1;
choice.saved=true;
// probably some extra logic related to saving
};
请注意,我已向 saveChoice 方法添加了参数 - 您需要知道要保存哪个选择。 另外,我认为添加新选择的按钮应该移到表格之外 - 添加新项目与任何现有项目都不相关。
关于javascript - Angular 隐藏 ng-repeat 表行中的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34318990/