Winkel Ausdruck nicht Wert zeigt

Ich habe den folgenden Code in HTML-DateiWinkel Ausdruck nicht Wert zeigt

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

Und der Code in js ist

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

Ich bin den folgenden Fehler als Fehler beim Abruf: $ Injektor: modulerr Modulfehler. Ich bin neu in angularjs und versuche, Event-Handling zu lernen. Auf Knopfdruck wird die Anzahl der Klicks erhöht und die Anzahl der Abneigungen erhöht.

Quelle

2016-03-22 curiousDev

Sie haben 'ngApp' deklariert als' MyModule' - aber in Code, den Sie haben 'FirstModule' - Sie haben auch 'MyController' vs.' myController' – tymeJV

Everyting scheint hier zu arbeiten https://plnkr.co/edit/32ETCvd8KGsG9zUdfdZk?p=preview –

@PankajParkar Es gibt eine Auch der Fehler zu versuchen, die Scope-Funktionen anstelle der Eigenschaften auf dem Technologieobjekt zu erhöhen. – Lex

Es ist, weil Sie haben diese im HTML:

<body ng-app="MyModule">

Und doch haben Sie Ihre App-Modul wie folgt definiert:

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

Sie müssen sie ändern, so dass sie entweder beide „MyModule“ oder "FirstModule".

aktualisieren
So Sie das Modul Injektion Fehler korrigiert haben, aber es gibt auch dieser Fehler:

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

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

es sein sollte:

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

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

Möglicherweise möchten Sie auch die ändern Wert auf Ihrem zweiten Knopf, um "Abneigung" anstelle von "Wie" zu sein.

Working JSFiddle

Assoziierte Code, HTML zuerst:

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

Quelle

2016-03-22 21:12:07 Lex

Nein seine Kopie einfügen Fehler – curiousDev

@curiousDev Ich aktualisierte die Frage, um den Fehler zu adressieren, nachdem Ihr Modul injizieren Fehler wurde behoben. – Lex

immer noch nicht funktioniert – curiousDev

Winkel Ausdruck nicht Wert zeigt

Antwort

Verwandte Themen