Reputation: 81

$scope not working in Angular js

The code works fine if I use the "this" method to expose variables. However, after the inclusion of scope in the code. The page displays only the elements that are out of the controller's scope.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head
         content must come *after* these tags -->
    <title>Ristorante Con Fusion: Menu</title>
        <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="styles/bootstrap-social.css" rel="stylesheet">
    <link href="styles/mystyles.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="container">
        <div class="row row-content" ng-controller="myctrl">
            <div class="col-xs-12">
                <div class="tab-content">
            <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" ng-class="{active: isSelected(1)}">
                    <a href="" ng-click="select(1)"
                     aria-controls="all menu"
                     role="tab">The Menu</a></li>
                    <li role="presentation" ng-class="{active: isSelected(2)}">
                    <a href="" ng-click="select(2)"
                     aria-controls="appetizers"
                     role="tab">Appetizers</a></li>
                    <li role="presentation" ng-class="{active: isSelected(3)}">
                    <a href="" ng-click=" select(3)"
                     aria-controls="mains"
                     role="tab">Mains</a></li>
                    <li role="presentation" ng-class="{active: isSelected(4)}">
                    <a href="" ng-click=" select(4)"
                     aria-controls="desserts"
                     role="tab">Desserts</a></li>
                </ul>
                </div>
            <ul>
            <li class="media" ng-repeat="dish in dishes|filter:filtText">
                    <div class="media-left media-middle">
                        <a href="#">
                        <img class="media-object img-thumbnail"
                         ng-src={{dish.image}} alt="Uthappizza">
                        </a>
                    </div>
                    <div class="media-body">
                        <h2 class="media-heading">{{dish.name}}
                         <span class="label label-danger">{{dish.label}}</span>
                         <span class="badge">{{dish.price | currency}}</span></h2>
                          <p>{{dish.description}}</p>
                        <p>Comment: {{dish.comment}}</p>
                        </div>
                </li>
                </ul>
            </div>
            </div>
        </div>

<script src="bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controller.js"></script>
</body>

</html>

App.js:

 var app=angular.module("myApp",[]);

Controller.js:

app.controller("myctrl",['$scope',function($scope) 
        {       $scope.dishes=[
                         {
                           name:'Uthapizza',
                           image: 'images/uthapizza.png',
                           category: 'mains',
                           label:'Hot',
                           price:'4.99',
                           description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
                           comment: ''
                        },
                        {
                           name:'Zucchipakoda',
                           image: 'images/zucchipakoda.png',
                           category: 'appetizer',
                           label:'',
                           price:'1.99',
                           description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
                           comment: ''
                        },
                        {
                           name:'Vadonut',
                           image: 'images/vadonut.png',
                           category: 'appetizer',
                           label:'New',
                           price:'1.99',
                           description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
                           comment: ''
                        },
                        {
                           name:'ElaiCheese Cake',
                           image: 'images/elaicheesecake.png',
                           category: 'dessert',
                           label:'',
                           price:'2.99',
                           description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
                           comment: ''
                        }
                        ];
                         $scope.filtText = '';
                            $scope.tab = 1;
             $scope.dishes = dishes;
             $scope.select = function(setTab) {
                 $scope.tab = setTab;

                if (setTab === 2)
                     $scope.filtText = "appetizer";
                else if (setTab === 3)
                     $scope.filtText = "mains";
                else if (setTab === 4)
                     $scope.filtText = "dessert";
                else
                     $scope.filtText = "";
            }
             $scope.isSelected = function (checkTab) {
                return ( $scope.tab === checkTab);
            }

            }])

Upvotes: 3

Answers (2)

rdgd

Reputation: 1446

Remove the following line of code

$scope.dishes = dishes;

What you are doing here is setting the value of $scope.dishes equal to the value of the variable dishes, but dishes is not initialized or defined anywhere, so you are likely overwriting the array of dishes that you created with the value undefined.

Upvotes: 1

Yosvel Quintero

Reputation: 19090

You are overwriting/redefining the variable in the line:

$scope.dishes = dishes;

Upvotes: 1

$scope not working in Angular js

Answers (2)

Related Questions