CODEWITHSUNDEEP
jqueryangularjs
vineet
vineet

Reputation: 14236

How to implement dom jquery click function in angularjs

I am newbie of angularjs. I have a jquery click function i.e,

Here jQuery code:-

$('.nav li').click(function(){
  $('#sidebar').hide();
});

Now,I just implement the above jquery function in angularjs.

Somethings like:

var ele = angular.element('.nav li');
ele.click=function(){
  var sidebarEle=angular.element('#sidebar');
  sidebarEle.hide();
}

Upvotes: 0

Views: 570

Answers (2)

vipin Bhandari
vipin Bhandari

Reputation: 192

I think you should try this

<div ng-app="MyApp" class="container">
        <div ng-controller="ctrl">
            <p id="sidebar">My Name is Vipin</p>
            @*<table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"></table>*@

            <button type="button" ng-click="hide()" class="nav li">CLik</button>
        </div>
    </div>



 var app = angular.module('MyApp', []).controller('ctrl', function ($scope) {
                var ele = angular.element(document.querySelector('.nav'));

                $scope.hide = function () {
                    angular.element(document.querySelector('#sidebar')).css('display', 'none');
                }
                    //var sidebarEle = angular.element('#sidebar');

            })

it will help

Upvotes: 1

Shashank Trivedi
Shashank Trivedi

Reputation: 252

You need to create a controller containing function to be called on click, i.e. your click event handler.

$scope.OnClick = function(){
  $scope.showSidebar = false;
}

In HTML -

<nav ng-show="showSidebar"></nav>
<input type="button" ng-click="OnClick"/>

Upvotes: 0

Related Questions