ng-repeat表行

Question

如何隐藏输入元素并将值替换为表格行，输入是使用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>

位指示

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 ------
         };

Answer 1

好的，最简单的方法可能是这样的：

1. 为每个选择对象添加附加字段，说明是否已保存
2. 为每个选项添加两个<td>，一个用纯文本，一个用输入，并根据额外的参数显示/隐藏它们＆＃39;值。

这样的事情：

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

在控制器中：

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方法添加了参数 - 您需要知道要保存哪个选项。 此外，我认为添加新选项的按钮应移到表格之外 - 添加新项目与任何现有项目无关。