Feb 27, 2016

Calling AngularJS Function From Outside The Scope

Sometimes you may want to call a function in angular scope from outside the scope. For an example will say you have an AngularJS Controller which contains a function to do something. And you have another button outside the this controller. You can use below method to do it so.

Lets see initially how our controller looks like.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <input type="button" value="Say Hello" ng-click="sayHello()"/>
        <br />
        <span>{{name}}</span>
    </div>
    <hr/>
</body>
<script type="text/javascript" >
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.name = '';
        $scope.sayHello = function () {
            $scope.name = 'Nifal Nizar';
        };
    });
</script>
</html>

Now lets say you wanted to call the "sayHello()" function from outside the controller. First what you should do is get the scope of the controller which contains the method you wanted call to a variable. In order to that first you should have sort of an identification to the controller. Simply you can give id to the container which contains the controller. Then you can simply apply it to the scope.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div id="mySec" ng-controller="myController">
        <input type="button" value="Say Hello" ng-click="sayHello()"/>
        <br />
        <span>{{name}}</span>
    </div>
    <hr>
    <br />
    <input type="button" value="Say Hello From JQuery" onclick="callAngularFunction()">
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.name = '';
        $scope.sayHello = function () {
            $scope.name = 'Nifal Nizar';
        };
    });

    function callAngularFunction() {
        var scope = angular.element(document.getElementById("mySec")).scope();
        scope.$apply(function () {
            scope.sayHello();
        });
    }
  
</script>
</html>

Hope you had what you are looking for.

Feb 13, 2016

[Fixed Solution] Check For The Existence Of Option In Select Using JQuery

In this article I'm going to show you all, how to check for <option>'s existence in a <select> tag. Their are many ways to do this. Lets see a simple way of it.

First lets have a look on my drop down.

<html>
<body>
    <select id="ddMember">
        <option value="Nifal">Nifal</option>
        <option value="Asjad">Asjad</option>
        <option value="Dinesh">Dinesh</option>
    </select>
</body>
</html>

Now lets say you wanted to check for the existence of the member "Gowtham" in the above drop-down. Use below java script codes to check it.

1	var isExist = $('#ddMember option:contains("Gowtham")').length;

Above code will check for the given option. If value is not exist it will return zero(0). Otherwise it will return some other number, depending on the occurrences.

Lets say, you wanted check for a option and if not available you wanted add it to your drop-down, simply use your below codes to do it.

1
2
3

if($('#ddMember option:contains("Gowtham")').length){
  $('#ddMember').append("<option value="Gowtham">Gowtham</option>");
}

Hope you found, what you looked for.

Easy Code Stuff