CODEWITHSUNDEEP
angularjs
Zedd Almighty
Zedd Almighty

Reputation: 39

Angular JS ng-show issue

I'm trying to learn Angular JS and implement it in a game I'm building for learning purposes. My code works just fine without ng-show. It works fine with ng-show="true" and "false". However, the moment I set ng-show="togglesbox.show", it breaks my code completely.

Example of HTML:

<div class="player2Wrap" ng-show="player2Box.show">
  <div class="playerName">{{p2name.name}}</div>
  <div class="player">{{p2guess.guess}}</div>
  <div class="playerScore">Score:</div>
  <div class="pScoreNumber">{{p2score.score}}</div>
  <div class="num"><input type="number" ng-model="p2guess.guess" class="numberGuess" min="1"                 max="10"></div>
</div>

For the JS I have inside my controller:

$scope.player2Box.show = true;

but soon as I save the controllers file with that line of code my entire page becomes broken. If I comment out that line of code it works again.

Going by the example in the book, my code is correct. I'm so confused because my code looks right according to the example in the book. Plus, what info I have found it seems to be right compared to that as well. What am I doing wrong?

Upvotes: 0

Views: 285

Answers (1)

D.Evangelista
D.Evangelista

Reputation: 6543

The problem is that you are defining a property in a null object.

Just change your controller code to this:

$scope.player2Box = {};
$scope.player2Box.show = true;

Or, if you prefer:

$scope.player2Box = {
    show: true
};

Upvotes: 2

Related Questions