CODEWITHSUNDEEP
angularjs
Fred J.
Fred J.

Reputation: 6039

angular ng-repeat without controller

I am learning angular and would like to understand why the list li in mainMenu.html is showing the data from the json file even thou there is no controller in the mainMenu.html

And if MainMenuCtrl is the controller as indicated in app.js, How can I implement ng-click="tappedMenu(item) inside the li tag as well? Thanks

//---app.js-----------------------------------------

(function () {                                          
    'use strict';

    angular
        .module('angApp', ['ngRoute'])                  
        .config(['$routeProvider', routeProvider]);    
})();

function routeProvider ($routeProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'views/mainMenu.html',
        controller: 'MainMenuCtrl'
    }).otherwise({      //home page
        redirectTo: '/list'
    });
}


angular.element(document).ready(function () {
    angular.bootstrap(document, ['angApp']);
});


//---controllers.js-----------------------------------------

angular
    .module('angApp')                                                   
    .controller('MainMenuCtrl', ['$scope', '$http', MainMenuCtrl]);    

function MainMenuCtrl ($scope, $http) {
    $http.get('js/mainMenu.json').then(
        function (response) {
            $scope.menuItems = response.data;
        },
        function (error) {
            alert("http error");
        }
    )
}
//---index.html-----------------------------------------

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/controllers.js"></script>
    <script src="js/controllers/headerCtrl.js"></script>
    <meta name="viewport" content="width=device-width" />
</head>

<body>

<main ng-view></main>


</body>
</html>


//---mainMenu.html-----------------------------------------

<section class="mainMenu">
    <ul>
        <li ng-repeat="item in menuItems" ng-click="tappedMenu(item)">
            <image src="images/{{item.image}}_.png"></image>
            {{item.name}}
        </li>
    </ul>
</section>

Upvotes: 2

Views: 805

Answers (3)

Rousonur Jaman
Rousonur Jaman

Reputation: 1271

You need to write 'tappedMenu' function inside 'MainMenuCtrl'. Otherwise everything is ok. If you face any problem then knock me.

Upvotes: 0

Jay
Jay

Reputation: 452

In this case, the router is responsible for attaching the controller to your template:

function routeProvider ($routeProvider) {
  $routeProvider.when('/list', {
    templateUrl: 'views/mainMenu.html',
    controller: 'MainMenuCtrl'
  }).otherwise({      //home page
    redirectTo: '/list'
  });
}

The /list route is bound to mainMenu.html with controller MainMenuCtrl. (See official documentation)

As for your second question, just add any method you need in the controller, as Popescu has already shown:

$scope.whatever = function(){...}

And in the template:

<li ng-click="whatever()">

Upvotes: 0

Popescu Alexandru Constantin
Popescu Alexandru Constantin

Reputation: 144

The controller is defined in your app.js, is MainMenuCtrl. For the second question you need to implement a function in the same controller called tappedMenu that takes as parameter an item. You have to write something like : 

function MainMenuCtrl ($scope, $http) {
    $http.get('js/mainMenu.json').then(
        function (response) {
            $scope.menuItems = response.data;
        },
        function (error) {
            alert("http error");
        }
    )

    $scope.tappedMenu = function(item) {
        /*do whatever you want with the clicked item*/
    }
}

So if you define a controller with $routeProvider you don't have to define it explicitly also in the view (html file).

Upvotes: 1

Related Questions