$ (это) альтернатива angularjs

Question

Я хочу сделать что-то подобное в AngularJS с этим Jquery код

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> 

угловой 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

Вместо создания HTML вы должны использовать директиву ngIf для рендеринга желаемого HTML с использованием значения флага i.e edit в моем примере.

директива ngIf удаляет или воссоздает часть дерева DOM на основе {expression}. Если выражение, присвоенное ngIf, оценивает значение false, элемент удаляется из DOM, в противном случае клон элемента повторно вводится в 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