Question

如果用户点击编辑按钮，我会启用文本框。这很好用：

my.html

<tr ng-repeat="data in Value" >
    <td>
        <span ng-show="!data.edit">{{data.question}}</span>
        <input ng-show="data.edit" type="text" ng-model="data.question" class="form-control" placeholder="Name"/>
    </td>
    <td>{{data.name}}</td>
    <td><button id="{{data.id}}" ng-click="editUtterance(data)" class="glyphicon glyphicon-pencil edit">Edit</button></td>
    <td><button id="{{data.id}}" ng-click="save(data)" class="glyphicon glyphicon-pencil edit">Save</button></td>
</tr>

myscript.js

$scope.editUtterance = function(data){
                        //alert(data.question); 
                        data.edit = true;
                        //console.log(data.edit);
                    }
                    $scope.updateModalUtterance = function(data){
                        //alert(data.id); 
                        $scope.id = data.id;
                        alert($scope.id);
                        data.edit = true;
                        var data = {
                            question: data.question
                        }
                        $http({
                        method: 'PATCH', 
                        url:'/api/url/'+$scope.id,
                        params:data,
                            }).then(function (response) {
                            console.log(response.data);
                            $scope.edit = 'false';                            
                            console.log($scope.edit);
                        }, function (response) {
                            console.log(response); 
                        });
                    }

成功回复后我试图隐藏文本框，但它没有隐藏。

我该怎么做才能解决这个问题？

Answer 1

在函数外部，创建一个变量

$scope.textVisi=true;

并在成功回复后将其设为false，如下所示。

    //your code
    .then(function (response) {
         console.log(response.data);
         $scope.textVisi = false;                          
         console.log($scope.edit);
    });

并在用户界面的ng-if中使用此变量。

Answer 2

在html

中的函数editUtterance中传递循环的$ index

<td><button id="{{data.id}}" ng-click="editUtterance(data, $index)" class="glyphicon glyphicon-pencil edit">Edit</button></td>

并更改控制器功能，如：

$scope.editUtterance = function(data, _idx){
                        //alert(data.question); 
                        $scope.Value[_idx]['edit'] = true; // <=============Change this line and update other places similarly
                        //console.log(data.edit);
                    }
                    $scope.updateModalUtterance = function(data){
                        //alert(data.id); 
                        $scope.id = data.id;
                        alert($scope.id);
                        $scope.Value[_idx]['edit'] = true;
                        var data = {
                            question: data.question
                        }
                        $http({
                        method: 'PATCH', 
                        url:'/api/url/'+$scope.id,
                        params:data,
                            }).then(function (response) {
                            console.log(response.data);
                            $scope.Value[_idx]['edit'] = false;                           
                            console.log($scope.edit);
                        }, function (response) {
                            console.log(response); 
                        });
                    }

希望这对你有帮助。

AngularJS在成功响应后隐藏文本框

2 个答案: