AngularJs - check condition (if - else ) when scope value change

Question

In my application I want to do some task when updating a scope variable. but my code is run page loading only. it is not trigger while value changes.

abcd value is updating on click but if else condition not trigger. Please help

Html Code

<div  ng-app="MyApp" ng-controller="BaseController" id="BaseController">
   {{abcd}}{{test}}
</div>
<ul>
    <li class="btn" data-id="One"><a href="#">One</a></li>
    <li class="btn" data-id="Two"><a href="#">Two</a></li>
    <li class="btn" data-id="Three"><a href="#">Three</a></li>
    <li class="btn" data-id="Four"><a href="#">Four</a></li>
    <li class="btn" data-id="Five"><a href="#">Five</a></li>
</ul>

Angular JS Code

var app = angular.module('MyApp', []);
app.controller('BaseController',['$scope',function($scope){
    $scope.abcd = 'testvalue1';
    $scope.test = 'test Value 2';
        console.log($scope.abcd);
    if($scope.abcd === 'One'){
    $scope.test = 'First Time';

    }else if($scope.abcd === 'Two'){
    $scope.test = 'Second Time';

    }else if($scope.abcd === 'Three'){
    $scope.test = 'Three Time';

    }else if($scope.abcd === 'Four'){
    $scope.test = 'Four Time';

    }else if($scope.abcd === 'Five'){
    $scope.test = 'Five Time';

    }
}]);

Javascript Code

 $('.btn').on('click',function(){
    var target = $(this).attr('data-id');
     var scope = angular.element($("#BaseController")).scope();
     scope.$apply(function(){
            scope.abcd = target;
    })

});

yes I want to update angular variable from different script outside of angular — Sebin Simon
– Sebin Simon, Commented Aug 20, 2015 at 7:51

ThibaudL · Accepted Answer · 2015-08-20 07:52:48Z

2

oO you should not use JQuery

<ul>
    <li class="btn" ng-click="abcd='One'"><a href="#">One</a></li>
    <li class="btn" ng-click="abcd='Two'"><a href="#">Two</a></li>
    <li class="btn" ng-click="abcd='Three'"><a href="#">Three</a></li>
    <li class="btn" ng-click="abcd='Four'"><a href="#">Four</a></li>
    <li class="btn" ng-click="abcd='Five'"><a href="#">Five</a></li>
</ul>

answered Aug 20, 2015 at 7:52

ThibaudL

1,0099 silver badges16 bronze badges

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

5 Comments

Sebin Simon Over a year ago

no I can't use angular everywhere because its a big project and there is a possiiblity to update the same variable from different section or scripts. that is why I using jQUery + AngularJs

ThibaudL Over a year ago

oh ok, I understand your issue, you should put your test inside a function and call it in your JQuery : scope.test()

Sebin Simon Over a year ago

click and updating functionality working fine. Only the problem is if and else condition work only at load.

ThibaudL Over a year ago

Or maybe a function taking the target as a parameter and updating your abcd then launching the test

MagicJuly Over a year ago

suggest that you should not use jQuery+AngularJs even if it's a big project, with bad structure and low maintainability.

Tj Gienger · Accepted Answer · 2015-08-20 08:00:18Z

2

use $scope.$watch:

$scope.$watch('abcd', function(oldValue, newValue) {
    if (newValue === ?) {
       // do this
    }
});

also, this might help satisfy some, angular includes jquerylite:

angular.element('.btn').on('click', function() {...})

answered Aug 20, 2015 at 8:00

Tj Gienger

1,4051 gold badge13 silver badges17 bronze badges

Comments

clintsmith · Accepted Answer · 2015-08-20 07:59:18Z

1

You have to use $scope.$watch in your controller to watch the abcd value and act upon it when it changes.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

$scope.$watch('abcd', function(val) {
    if(val === 'One') {
      doWhatever();
    }
}

edited Aug 20, 2015 at 7:59

answered Aug 20, 2015 at 7:56

clintsmith

6851 gold badge7 silver badges17 bronze badges

4 Comments

ThibaudL Over a year ago

Not sure it's a good idea to add a watch if it's a manual change it would be enough to add a function taking taget as a parameter and then do the affectation and the test.

clintsmith Over a year ago

I try to avoid watches if I see a better way but I still wind up using them sometimes and I don't notice a big decline in performance. I guess it depends on what you are doing though. If you get too many watches I'm sure it would start to affect performance. Also, if you only need the watch to execute it's code once, you can unregister it the first time it runs. In your case I don't think that applies though.

Sebin Simon Over a year ago

if I am using abcd as an jSon array, the changes in key value not updating in $scope.$watch('abcd') it update only if we assign the key manually $scope.$watch('abcd.key')

clintsmith Over a year ago

As far as I know with watches on a complex object, you have 3 options: You can watch on the key(you already showed this), you can set the objectEquality parameter of the $watch to be true but be warned, in the link I posted in my answer it says "watching complex objects will have adverse memory and performance implications.", or you can use $scope.$watchCollection which will do a shallow watch of (I believe) the objects immediate properties only. This article was helpful to me: bennadel.com/blog/…

Collectives™ on Stack Overflow

AngularJs - check condition (if - else ) when scope value change

3 Answers 3

5 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related