angular property visibility within html page

Question

I have a simple angular page:

<div ng-controller="JoinGameController">
    <table>
        <tr ng-repeat="game in gameList">
            <td>{{game}}</td>
            <td>&nbsp;</td>
            <td><a href="#!/joinGame" ng-click="selectGame(game)">select</a></td>
        </tr>
    </table>
    <br/>
    Selected game: &nbsp; {{selectedGameId}}
    <br/>
    <a href="#!/joinGame" ng-click="clearSelection()">Clear</a>

    <div ng-if="isGameSelected"> &nbsp; 
        <p>To join this game put your name in the box and click the button</p>

        <input type="text" ng-model="playerName">
        <button ng-click="joinExistingGame()">Join Game</button>
        <br/>
        <p ng-if="playerAdded">{{addPlayerResponse}}</p>
    </div>
</div>

my problem is that the player input box: ng-model="playerName"> doesn't provide the value when the button is clicked (binding doesn't work). However it will work when I move it above the DIV element it belongs to.

Here is the controller of that page:

'use strict';

angular.module('pokerApp.joinGame', ['ngRoute'])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/joinGame', {
         templateUrl: 'joinGame/joinGame.html',
         controller: 'JoinGameController'
    });
}])

.controller('JoinGameController', ['$http', '$scope', function ($http, $scope) {
    $http.get('http://localhost:8080/PokerGame-REST/allGames').success(function (response) {                    
        $scope.gameList = response;
    });

    $scope.selectedGameId = null;
    $scope.isGameSelected = false;
    $scope.playerName = '';
    $scope.playerAdded = false;

    function selectGame(game) {
        $scope.selectedGameId = game;
        $scope.isGameSelected = true;
    }

    function clearSelection() {
        $scope.selectedGameId = null;
        $scope.isGameSelected = false;
    }

    function joinExistingGame() {
         $http.get('http://localhost:8080/PokerGame-REST/addHand', {
                    params: {
                        gameId: $scope.selectedGameId,
                        name: $scope.playerName
                    }
         }).success(function (response) {
              $scope.playerAdded = true;
              $scope.addPlayerResponse = response.addHand;
         });
    }

    $scope.selectGame = selectGame;
    $scope.clearSelection = clearSelection;
    $scope.joinExistingGame = joinExistingGame;
}]);

What is the catch here?

add some js code or provide a fiddle please

Varit J Patel
– Varit J Patel

2016-07-13 08:54:04 +00:00
Commented Jul 13, 2016 at 8:54 — Varit J Patel
– Varit J Patel, Commented Jul 13, 2016 at 8:54
can you show your javascript? we cant help you otherwise

Guillaume
– Guillaume

2016-07-13 08:55:34 +00:00
Commented Jul 13, 2016 at 8:55 — Guillaume
– Guillaume, Commented Jul 13, 2016 at 8:55

MMhunter · Accepted Answer · 2016-07-13 09:00:45Z

2

You issue is that ng-if creates child scope so you cannot access your property inside the div with ng-if attribute.

you may try $parent.playerName

answered Jul 13, 2016 at 9:00

MMhunter

1,4511 gold badge12 silver badges18 bronze badges

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

Comments

Grundy · Accepted Answer · 2016-07-13 09:00:51Z

2

issue with using ng-if directive, that create own scope. So playerName added in this scope of ng-if directive.

Just create in main scope variable, like: player={}, and use it

<input type="text" ng-model="player.playerName">

answered Jul 13, 2016 at 9:00

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Collectives™ on Stack Overflow

angular property visibility within html page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related