索引ng-repeat只编辑一个

我想索引我的ng-repeat，这样我就可以通过使文本消失而输入一个出现来编辑一行。索引ng-repeat只编辑一个

<div ng-controller="BusinessGoalsCtrl"> 
      <table class="table table-hover"> 
       <tr> 
        <th>Type:</th> 
        <th>Timeframe:</th> 
        <th>Goal:</th> 
        <th>Edit:</th> 
       </tr> 
       <tr ng-class="editMode ? 'ng-hide' : ''" ng-repeat="details in businessGoalDetails track by $index"> 
        <td style="width:30%;">{{details.display_name}} {{$index}}</td> 
        <td style="width:30%;">{{details.timeframe}}</td> 
        <td style="width:30%;">{{details.threshold}}</td> 
        <td style="width:10%;"><i ng-click="toggleEdit(true, $index)" class="fa fa-pencil-square-o"></i></td> 
       </tr> 
       <tr ng-class="editMode ? '' : 'ng-hide'" ng-repeat="inputs in businessGoalDetails track by $index"> 
        <td style="width:30%;"><input ng-model="inputs.display_name"/></td> 
        <td style="width:30%;"><input ng-model="inputs.timeframe"/></td> 
        <td style="width:30%;"><input ng-model="inputs.threshold"/></td> 
        <td style="width:10%;"><i ng-click="toggleEdit(false, $index)" class="fa fa-check"></i></td> 
       </tr> 
      </table> 
     </div>

角码

$scope.editMode = false; 
     $scope.details = 0; 
     $scope.toggleEdit = function (showEdit, $index) { 
      console.log("editing view"); 
      $scope.editMode = showEdit; 
     }

来源

2015-09-04 user1842315

你应该查找在纳克级和NG-隐藏的文档，你就错了。 –

[你可以用这个]（http://vitalets.github.io/angular-xeditable/#editable-row）？有些项目不允许您使用外部库，但实际上这会阻止您重新发明轮子并为您提供更多功能。 – ODelibalta

你应该只使用ng-if或ng-show而不是ng-class，你想编辑所有行还是只编辑一行？ – PSL

你很可能只是使用ng-if/ng-show代替ng-class和使用ng-repeat-start/end而不是创建2个不同的NG-重复。此外，您可以通过在其子范围或迭代中的对象上设置属性来使单行可编辑。在您的代码中，您将在父级作用域级别设置属性editMode，而不仅仅是针对每行。

<tr ng-show="!details.editMode" ng-repeat-start="details in businessGoalDetails track by $index"> 
    <!-- ... --> 
    <td style="width:10%;"><i ng-click="details.editMode=true" class="fa fa-pencil-square-o"></i></td> 
</tr> 
<tr ng-show="details.editMode" ng-repeat-end> 
    <td style="width:30%;"><input ng-model="details.display_name"/></td> 
    <!-- ... --> 
    <td style="width:10%;"><i ng-click="details.editMode=false" class="fa fa-check"></i></td> 
</tr>

或者

<tr ng-show="!editMode" ng-repeat-start="details in businessGoalDetails track by $index"> 
    <!-- ... --> 
    <td style="width:10%;"><i ng-click="toggleEdit(true)" class="fa fa-pencil-square-o"></i></td> 
</tr> 
<tr ng-show="editMode" ng-repeat-end> 
    <td style="width:30%;"><input ng-model="details.display_name"/></td> 
    <!-- ... --> 
    <td style="width:10%;"><i ng-click="toggleEdit(false)" class="fa fa-check"></i></td> 
</tr>

和

$scope.toggleEdit = function (showEdit) { 
     this.editMode = showEdit; //'this' here is the child scope 
    }

来源

2015-09-04 19:38:14 PSL

索引ng-repeat只编辑一个

回答

相关问题