Question

我正在尝试索引我的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>

Angular Code

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

Answer 1

您可以使用ng-if/ng-show代替ng-class并使用ng-repeat-start/end而不是创建2个不同的ng-repeats。您也可以通过在其子作用域上设置属性或在迭代下设置对象来使单行可编辑。在您的代码中，您在父作用域级别设置属性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
    }

索引ng-repeat仅编辑一个

1 个答案: