CODEWITHSUNDEEP
javascriptangularjs
curiousDev
curiousDev

Reputation: 437

angular expression not showing value

I have the following code in html file 

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <link href="Styles.css" rel="stylesheet"
</head>
<body ng-app="FirstModule">
    <div ng-controller="myController">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Likes</th>
                    <th>DisLikes</th>
                    <th>Likes/Dislikes</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="technology in technologies">
                    <td>{{ technology.name}}</td>
                    <td>{{ technology.likes}}</td>
                    <td>{{ technology.dislikes}}</td>
                    <td>
                        <input type="button" value="Like" ng-click="incrementLikes(technology)" />
                         <input type="button" value="Like" ng-click="incrementDisLikes(technology)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

And the code in js is 

/// <reference path="angular.min.js" />
var myApp = angular.module("FirstModule", []);
var myController = function ($scope) {



    var technologies = [
                         { name: "C#", likes: 0, dislikes: 0 },
                         { name: "ASP.NET", likes: 0, dislikes: 0 },
                         { name: "SQL", likes: 0, dislikes: 0 },
                         { name: "AngularJS", likes: 0, dislikes: 0 },
    ];

    $scope.technologies = technologies;
    $scope.incrementLikes = function (technology) {
        $scope.incrementLikes++;
    }

    $scope.incrementDisLikes = function (technology) {
        $scope.incrementDisLikes++;
    }
};

myApp.controller("myController", myController);

I am getting the following error as Error: $injector:modulerr Module Error. I am new to angularjs and trying to learn event handling. On button click likes count will increase and same for dislikes.

Upvotes: 1

Views: 1345

Answers (1)

Lex
Lex

Reputation: 7194

It's because you have this in the HTML:

<body ng-app="MyModule">

And yet you have defined your app module as:

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

You need to change them so they are either both "MyModule" or "FirstModule".

Update
So you have corrected the module injection error, but there is also this error:

$scope.incrementLikes = function (technology) {
    $scope.incrementLikes++;
}

$scope.incrementDisLikes = function (technology) {
    $scope.incrementDisLikes++;
}

It should be:

$scope.incrementLikes = function (technology) {
    technology.likes += 1;
}

$scope.incrementDisLikes = function (technology) {
    technology.dislikes += 1;
}

You may also want to change the value on your second button to be "Dislike" instead of "Like".

Working JSFiddle

Associated code, HTML first:

<div ng-app="FirstModule" ng-controller="myController">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Likes</th>
                <th>DisLikes</th>
                <th>Likes/Dislikes</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="technology in technologies">
                <td>{{ technology.name}}</td>
                <td>{{ technology.likes}}</td>
                <td>{{ technology.dislikes}}</td>
                <td>
                    <input type="button" value="Like" ng-click="incrementLikes(technology)" />
                    <input type="button" value="Dislike" ng-click="incrementDisLikes(technology)" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

Javascript:

var myApp = angular.module("FirstModule", []);
var myController = function($scope) {
    var technologies = [{
        name: "C#",
        likes: 0,
        dislikes: 0
    }, {
        name: "ASP.NET",
        likes: 0,
        dislikes: 0
    }, {
        name: "SQL",
        likes: 0,
        dislikes: 0
    }, {
        name: "AngularJS",
        likes: 0,
        dislikes: 0
    }, ];

    $scope.technologies = technologies;

    $scope.incrementLikes = function(technology) {
        technology.likes += 1;
    }

    $scope.incrementDisLikes = function(technology) {
        technology.dislikes += 1;
    }
};

myApp.controller("myController", myController);

Upvotes: 2

Related Questions