CODEWITHSUNDEEP
jqueryangularjs
krishna Ram
krishna Ram

Reputation: 659

To get Value of $scope variable in HTML

I am new to Angular. I got problem, like I am creating a variable in Controller JS but can't fetch in HTML part.

<html ng-app='Demo'>    
<body>
            <h2>Select Your Symbol</h2><br><br>
            <div class='selection' ng-controller='MasterController' ng-init="selectedSymbol = ''" >
                <div class=" col-md-3"></div>
                <div  ng-repeat="symbol in symbols" ng-model="selectedSymbol">
                    <a class='col-xs-1 box' id={{symbol.definition}} ng-click="remove(symbol); user= symbol.definition" ><big class='fixed'>{{symbol.definition}}</big></a>
                </div>
            </div><br>
            {{selectedSymbol}}
        </body>
</html>

JS part

(function( ng) {

    "use strict";

    // Define our AngularJS application module.
    window.demo = ng.module( "Demo", [] );

})( angular );
(function( ng, app ) {

    "use strict";

    app.controller(
        "MasterController",
        function( $scope ) {


            // -- Define Controller Methods. ---------------- //

                $scope.symbols = [
            {
                definition: 'X',
            },
            {
                definition: 'O',
            }
        ];
        $scope.remove = function(symbol) {
         if(symbol.definition == 'X' && this.symbols.length >1)
         {
            this.symbols.splice(1);
            $scope.selectedSymbol = 'X';
            alert($scope.selectedSymbol);
         }
         else if (symbol.definition == 'O' && this.symbols.length >1)
         {
            this.symbols.splice(0,1);
             $scope.selectedSymbol = 'O';
             alert($scope.selectedSymbol);
         } 

        };
        }
    );

})( angular, demo );

Now I can see $scope.selectedSymbol in Alert but can't have in html. I want to use in way of Angular.

Please Help Thanks

Upvotes: 0

Views: 4713

Answers (1)

K K
K K

Reputation: 18099

You can only access the scope variable inside the controller container i.e. a div in your case. Outside that div, the scope variable is undefined. Place that tag inside the div, you will be able to access it.

Example:

<div class='selection' ng-controller='MasterController' ng-init="selectedSymbol = ''">
    <div class=" col-md-3"></div>
    <div ng-repeat="symbol in symbols" ng-model="selectedSymbol"> <a class='col-xs-1 box' id={{symbol.definition}} ng-click="remove(symbol); user= symbol.definition"><big class='fixed'>{{symbol.definition}}</big></a>

    </div>{{selectedSymbol}}<!--This is well inside the scope of controller and hence you can access it in the html-->
</div>

Upvotes: 3

Related Questions