Click here to Skip to main content
14,635,816 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi,
When i click a button a div is shown and what i want to do is when i click outside it anywhere in window wants to hide it.

I cannot use JQuery . Must find a way to do in angular. Thought of writing a custom directive ..

Any suggestions ??

I found this site Site

but since am new to Angular am not fully getting the idea

Thanks
Posted
Updated 12-Aug-14 2:07am
v2
Rate this:
Please Sign up or sign in to vote.

Solution 1

here is sample of hide and show div

i have create two div
on button click i have show one div and hide 2nd div

on windows mouseout event hide div
also mouseout on div hide the div itself





<title> New Document





function show(id)
{
//alert(id)
document.getElementById("dv").style.visibility = "visible";

document.getElementById("dv1").style.visibility = "hidden";
}


function hide(id) {
document.getElementById(id).style.visibility = "hidden";
document.getElementById("dv1").style.visibility = "visible";
}









show1



show2



   
Comments
Arjun Menon U.K 12-Aug-14 9:06am
   
Hi Yasir,

Thanks for the reply . I am not allowed to use JavaScript/JQuery only Angular ... :(
Rate this:
Please Sign up or sign in to vote.

Solution 2

Use this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script type="text/javascript">
        var flgIsHide = false;
        function controller1($scope) {
            $scope.items = [{ id: 1, name: "Item-1", imgurl: "http://icons.iconarchive.com/icons/hopstarter/flag/256/India-icon.png", isSelected: false },
            { id: 2, name: "Item-2", imgurl: "http://flagspictures.org/photo/icons/normal/256/India.png", isSelected: false },
            { id: 3, name: "Item-3", imgurl: "https://cdn1.iconfinder.com/data/icons/REALVISTA/flags/png/400/India.png", isSelected: false },
            { id: 4, name: "Item-4", imgurl: "http://www.swingdanceamerica.com/uploads/1/4/1/1/14116467/7085937.jpg", isSelected: false}];

            $scope.selectedItemImage = "#";

            $scope.selectItem = function (id, url) {
                flgIsHide = false;
                $scope.selectedItemImage = url;
                $scope.items.forEach(function (item) {
                    if (item.id == id)
                        item.isSelected = true;
                    else
                        item.isSelected = false;
                });
            };

            $scope.safeApply = function (fn) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            };
        }

        window.onclick = function () {
            if (flgIsHide) {
                var scope = angular.element(document.getElementById('controller1')).scope();
                scope.safeApply(function () {
                    scope.items.forEach(function (item) {
                        item.isSelected = false;
                    });
                    scope.selectedItemImage = "#";
                });
            }
            else
                flgIsHide = true;
        }
    </script>
</head>
<body ng-app>
    <div id="controller1" ng-controller="controller1">
        <div>
            List Of Items</div>
        <table style="border-collapse: collapse;" border="1">
            <tr>
                <td style="vertical-align: top;">
                    <table>
                        <tr ng-repeat="item in items">
                            <td ng-style="{'background-color': item.isSelected==false?'Red':'green'}">
                                <button ng-click="selectItem(item.id,item.imgurl)">
                                    {{item.name}}</button>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div ng-show="selectedItemImage!='#'">
                        <img id="imgItem" ng-src="{{selectedItemImage}}" style="height: 300px; width: 300px;" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100