CODEWITHSUNDEEP
javascriptjqueryangularjs
Prasanna
Prasanna

Reputation: 2641

Changing variable value dynamically with angularjs

I am trying to learn angularjs.

I have the following controller,

   skillPopulator.controller('skillsetController', function(){
         this.skillType = language; //value to be changed
    });

language and database are jsons in custom.js within the wrapper where controller is present like

var language = {         
            name: 'Java, Javascript, HTML5, CSS3'
        }
var database = {         
            name: 'MySQL, Oracle, PostGres'
        }

I would like to change the value of skillType to database upon the event

$("#db-skill").hover();

1) If I do so, will the change get reflected on my {{skill.skillType.name}} without a refresh?

2) How would I do it?

Upvotes: 0

Views: 727

Answers (2)

Poyraz Yilmaz
Poyraz Yilmaz

Reputation: 5857

if you want to use your variables at html side you should add them to $scope, so your basic jsons in controller like this has no meaning at html side, that is why you see no changes when you over your html item...

change your jsons to this...

$scope.language = {         
            name: 'Java, Javascript, HTML5, CSS3'
        }
$scope.database = {         
            name: 'MySQL, Oracle, PostGres'
        }

and here is a working PLUNKER...

Upvotes: 1

Raghavendra
Raghavendra

Reputation: 5387

You could use ng-mouseover See docs: https://docs.angularjs.org/api/ng/directive/ngMouseover

Instead of using this

$("#db-skill").hover();

use this:

<ANY id="db-skill" ng-mouseover="skillType = database"></ANY>

Upvotes: 0

Related Questions