How to implement dom jquery click function in angularjs

Question

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();
}

what actually you want to do ?? what you have tried, share your code ... — Manjeet Barnala
– Manjeet Barnala, Commented May 5, 2016 at 5:46

vipin Bhandari · Accepted Answer · 2016-05-05 06:43:42Z

1

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

answered May 5, 2016 at 6:43

vipin Bhandari

1927 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shashank Trivedi · Accepted Answer · 2016-05-05 05:50:39Z

0

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

answered May 5, 2016 at 5:50

Shashank Trivedi

2522 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to implement dom jquery click function in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related