javascript - $(this) AngularJS 的替代品

Question

我想用这个 jquery 代码在 AngularJS 中做类似的事情

x = $(this).next().next().val();
alert(x);

HTML 代码是:

<span ng-click="ajax_update_button()" class="glyphicon glyphicon-pencil" style="cursor: pointer; color: red;"></span>
<span ng-click="ajax_delete([[ x.id ]])" style="cursor: pointer; color: red;">X</span> ----- 
<span>[[ x.name ]]</span>

Angular javacript是:

var StudentListSystem = angular.module('StudentListSystem', ['ngRoute']);

StudentListSystem.controller('SectionFormController', function($scope, $http){          
    $scope.ajax_delete = function(id){
        // alert(id);
        $http.delete('http://127.0.0.1:8000/api/v1/section/'+id)
        .then(function(response){
            $scope.Notifications = true;
            $scope.Deleted = response.data;
            // alert(JSON.stringify(response));
            $http.get('http://127.0.0.1:8000/api/v1/section/')
            .then(function(response){
                $scope.Sections = response.data;
            });
        }, function(response){
            $scope.Notifications = true;
            $scope.Errors = response.data;
        });
    }
    $scope.ajax_update_button = function(event){
        x = $(this).next().next().text();
        $(this).next().next().html("<input type='text' value='"+x+"'>");
    }
});

主要问题是我正在寻找 $(this) 从 jquery 到 angularjs 的替代方案

Answer 1

您应该使用 ngIf 而不是创建 HTML指令使用标志值呈现所需的 HTML，即我的示例中的 edit。

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

您可以直接将 x 传递给函数

 <span ng-click="ajax_update_button(selectedCustomer)" class="glyphicon glyphicon-pencil" style="cursor: pointer; color: red;">Update</span>
 <span>
 <span ng-if="!selectedCustomer.edit">{{selectedCustomer.name}}</span>
 <span ng-if="selectedCustomer.edit"><input type='text' ng-model="selectedCustomer.name"></span>
 </span>

然后您可以访问其属性并根据您的要求操作该对象

$scope.selectedCustomer = {
 name: "Male",
 edit:false
};

$scope.ajax_update_button = function(selectedCustomer){
     selectedCustomer.edit = !selectedCustomer.edit;
}

DEMO