CODEWITHSUNDEEP
javascriptjqueryangularjs
Dean Christian Armada
Dean Christian Armada

Reputation: 7364

$(this) alternative of angularjs

I want to do something similar in AngularJS with this jquery code

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

The HTML code is:

<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 is:

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+"'>");
    }
});

Main question is that I am looking for an alternative of $(this) from jquery to angularjs

Upvotes: 0

Views: 365

Answers (1)

Satpal
Satpal

Reputation: 133403

Instead of creating HTML, you should use ngIf directive to render the desired HTML using the flag value i.e. edit in my example.

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.

You can directly pass x to the function as

 <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>

Then you can access its properties and manipulate the object as per your requirement

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

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

DEMO

Upvotes: 1

Related Questions