无法在Angular的$ scope中设置值？

Question

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?

Answer 1

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 ie:

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

Note the single quotes

Answer 2

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

Answer 3

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 }">

Answer 4

在ng-click中将参数作为字符串传递。

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