Changing the value of a boolean variable using ng-click

Question

I'm new to AngularJS and am making a web app which is supposed to filter out certain games depending on which day the team plays. I'm trying to change the value of a boolean variable with an ng-click, but it doesn't seem to be working as intended.

Here my HTML

<body ng-controller="MatchupController as matchupCtrl">
    <div class="jumbotron" ng-controller="DayController as DayCtrl">

    <button type="button" class="btn btn-info" ng-click="tnf()">Thursday Games</button>

</div>

<div class="row" ng-repeat="team in matchupCtrl.teams" ng-hide="team.tnf">
    <div class="col-sm-5 well">
        <h3>Home</h3>
        {{team.home.name}}
    </div>
    <div class="col-sm-5 well" >
        <h3>Away</h3>
        {{team.away.name}}
    </div>

</div>

...and my JS

var app = angular.module('mainApp', []);
app.controller('MatchupController',function(){
   this.teams = matchUps;

});


var matchUps = [
{
    home:{ 
        name:'Cincinnati Bengals',
        homeImage:{'background-image': 'url(http://prod.static.bengals.clubs.nfl.com/assets/img/gbl-hd-bg.jpg)'},
    },
    away:{ 
        name:'Miami Dolphins',
    awayImage:{'background-image': 'url(http://blog-imgs-70.fc2.com/o/f/f/offseason2012/Dolphins.jpg)'},
},
    location: 'Paul Brown Stadium, Cincinnati',
    time: '8:25pm',
    date: "2016-09-29",
    tnf: false,
},
{
    home:{
        name:'Jaxonville Jaguars',
        homeImage:{'background-image':     'url(http://nfasl.spruz.com/gfile/75r4!-!JEHJEG!-!zrzor45!-!LJPKNQQG-JJSJ-    HHMR-NNJR-EPLFJOMGLIMD/jacksonville_jaguars_banner.jpg)'},
    },
    away:{
        name:'Indianapolis Colts',
        awayImage: {'background-image': 'url(http://www.851facebook.com/images/sports-nfl-afc-south-indianapolis_colts-night-football-rugby-facebook-timeline-cover-banner-for-fb-profile.jpg)'},
    },
    location: 'Wembley Stadium, London',
    time: '9:30am',
    date: "2016-10-02",
    snf: false,
           },
{
    home: {
        name:'Minnesota Vikings',
        homeImage: {'background-image': 'url(http://611enterprises.com/wp-content/uploads/2014/11/Minnesota_Vikings_banner.jpg)'},  
    },
    away: {
        name: 'New York Giants',
        awayImage: {'background-image': 'url(http://www.covermyfb.com/media/covers/thumb/3895-new-york-giants.jpg)'},
    },
    location: 'U.S. Bank Stadium, Minneapolis',
    time: '8:30pm',
    date: "2016-10-03",
    mnf: false,
           }
]
app.controller('DayController',function() {
    var tnf = function() {
       matchUps.tnf = !matchUps.tnf;
        return matchUps.tnf;

    }
});

I want to change the value of tnf so it will hide in the display when the user clicks the button (i.e. changes the value of tnf to true).

Andrew Eisenberg · Accepted Answer · 2016-09-25 03:20:20Z

1

You need to attach tnf() to the controller's scope. The way you have it now, it is simply declared as a local variable and when the controller function finishes, the tnf function goes out of scope and will be garbage collected. Instead, you should do this:

app.controller('DayController',function() {
    this.tnf = function() {
       matchUps.tnf = !matchUps.tnf;
        return matchUps.tnf;
    }
});

answered Sep 25, 2016 at 3:20

Andrew Eisenberg

28.9k9 gold badges100 silver badges156 bronze badges

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

2 Comments

Mike Dombrowski Over a year ago

Thanks for the response. Even with the change, however, my functions still aren't working. Here is a link to the source code (dashboard.html and js/controller.js being the main files). github.com/mmikeyd123/DevelopmentExcercise

Andrew Eisenberg Over a year ago

It's hard to see what's going on. There may be a bunch of smaller issues. For example, I don't see where you have defined your routes.

Collectives™ on Stack Overflow

Changing the value of a boolean variable using ng-click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related