CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Rohan
Rohan

Reputation: 13811

Cannot set a value in $scope in Angular?

I am following the tutorial on Lynda.com for AngularJS essential training.

Part of my index file looks like:

<div class="container" ng-controller="AppCtrl">
    <h1>AngulAir</h1>
    <ul class="nav nav-pills">
        <li role="presentation" ng-class="destinationsActive"><a href="#/" ng-click="setActive(destinations)">Destinations</a></li>
        <li role="presentation" ng-class="flightsActive"><a href="#/flights" ng-click="setActive(flights)">Flights</a></li>
        <li role="presentation" ng-class="reservationsActive"><a href="#/reservations" ng-click="setActive(reservations)">Reservations</a></li>
    </ul>
    <div ng-view>
    </div>
    <p>{{ flightsActive }}</p>
</div>

Now when I click on any link it should fire the setActive function defined in the AppCtrl which looks like this:

$scope.setActive = function (type) {
    $scope.destinationsActive = '';
    $scope.flightsActive = '';
    $scope.reservationsActive = '';

    $scope[type + 'Active'] = 'active';
};

Now the problem is very simple. The function should take the type for example 'destinations' and append 'Active' to it and set the scope variable 'destinationsActive' to active which in turn should be reflected in the ng-class directive of the li tags and the link should be active.

I have tried to insert alert('hello'); after setting it active which fires up. Now this means that the function is indeed being called. But when I do alert($scope.destinationsActive); it gives me a blank alert whereas it should give me active as the value.

I am not following with the exercise files and I feel that maybe because the tutorial is relatively older, there might be changes in the framework. I have already encountered such problems with the tutorial. Anyway, what is it that I am doing wrong?

Upvotes: 0

Views: 263

Answers (4)

Virbhadrasinh
Virbhadrasinh

Reputation: 123

Pass argument as string in ng-click.

working code : http://jsfiddle.net/Virbhadrasinh/cLsLfkjm/

Upvotes: 0

Manuel B.
Manuel B.

Reputation: 115

You need to put parenthesis around the parameters in your html javascript function call. 

<a href="#/" ng-click="setActive('destinations')">Destinations</a>

Here is a working example: JSFiddle

Upvotes: 1

Christian Landgren
Christian Landgren

Reputation: 13783

I would recommend you to think of the model binding in more semantic way. For example use a checkbox instead of link and set the checkbox value as ng-model to a scope variable instead.

<input type="checkbox" ng-model="destinations">
<input type="checkbox" ng-model="flights">
<input type="checkbox" ng-model="reservations">

and thereafter use the model to reflect the rest of the changes (this is the answer to the original question, you have to specify a classname and a condition in brackets:

<li ng-class="{ destinationsActive: destinations }">

Upvotes: 0

detaylor
detaylor

Reputation: 7280

In your ng-click directives you are passing the argument as a variable, not a string.

ng-click="setActive(destinations)"

Will pass in the value of the $scope.destinations, which is undefined. Try passing in a string i.e.:

ng-click="setActive('destinations')"

Note the single quotes

Upvotes: 1

Related Questions