javascript - Angular 表达式不显示值

我在html文件中有以下代码

   <!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>

而js中的代码是

/// <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);

我收到以下错误错误:$injector:modulerr 模块错误。我是 angularjs 的新手，正在尝试学习事件处理。按钮点击喜欢的次数会增加，不喜欢的次数也会增加。

最佳答案

这是因为你在 HTML 中有这个:

<body ng-app="MyModule">

但您已将您的应用模块定义为:

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

您需要更改它们，使它们要么是“MyModule”，要么是“FirstModule”。

更新
所以你已经纠正了模块注入(inject)错误，但是还有这个错误:

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

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

应该是:

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

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

您可能还想将第二个按钮上的值更改为“不喜欢”而不是“喜欢”。

Working JSFiddle

关联代码，HTML优先:

<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);

关于javascript - Angular 表达式不显示值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36165269/

javascript - Angular 表达式不显示值

上一篇：Javascript 无法访问 HTML(左右移动对象)

下一篇：javascript - 如何计算 JavaScript 中两个日期的日、月和年差异？