AngularJS如何实现点击行时禁用其他文本框功能

Hey there! Let's fix this so that only one textbox is editable at a time when you click the edit button in your table rows. Here's a straightforward approach that fits right into your existing code:

Step 1: Track the Currently Editing Row in Your Controller #

First, add a variable to your AngularJS controller to keep track of which row is being edited. We'll use this to ensure only that row's textbox is active:

// Inside your AngularJS controller
$scope.currentEditingId = null; // Stores the ID of the row currently being edited

$scope.editUtterance = function(data) {
    // If we're clicking the already-editing row, toggle edit off
    if ($scope.currentEditingId === data.id) {
        data.edit = false;
        $scope.currentEditingId = null;
        return;
    }

    // Turn off edit mode for ALL rows first
    $scope.Value.forEach(item => {
        item.edit = false;
    });

    // Turn on edit mode for the clicked row
    data.edit = true;
    $scope.currentEditingId = data.id;
};

Step 2: Update Your HTML to Respect the Editing State #

Your existing HTML is already using ng-show to toggle between the span and input. With the controller changes above, this will automatically hide input boxes for all rows except the one you're editing. If you want to add an extra layer of safety (or if you prefer to keep inputs visible but disabled), you can adjust the input's ng-disabled attribute:

<tr ng-repeat="data in Value" >
    <td>
        <span ng-show="!data.edit">{{data.question}}</span>
        <!-- Option 1: Only show input for the active editing row (matches your original setup) -->
        <input ng-show="data.edit" type="text" ng-model="data.question" class="form-control" placeholder="Name"/>
        
        <!-- Option 2: Keep input visible but disable non-editing rows (if you prefer this behavior) -->
        <!-- <input ng-show="data.edit" type="text" ng-model="data.question" class="form-control" placeholder="Name" ng-disabled="data.id !== currentEditingId"/> -->
    </td>
    <td>{{data.name}}</td>
    <td>
        <button id="{{data.id}}" ng-click="editUtterance(data)" class="glyphicon glyphicon-pencil edit">Edit</button>
        <!-- ... your other buttons here ... -->
    </td>
</tr>

How This Works #

• Every time you click the Edit button, we first turn off edit mode for all rows in your Value array.
• Then we enable edit mode only for the row you clicked, and store its ID in currentEditingId.
• This ensures no other rows can be in edit mode at the same time, so only one textbox is active.

内容的提问来源于stack exchange，提问作者My Test