2017-06-10 3 views
1

Angular js-Controller funktioniert nicht gut

function studentController($scope) { 
 
\t \t $scope.student = { 
 
\t \t \t firstName : "Mahesh", 
 
\t \t \t lastName : "Parashar", 
 
\t \t \t fullName : function() { 
 
\t \t \t \t var studentObject; 
 
\t \t \t \t studentObject = $scope.student; 
 
\t \t \t \t return studentObject.firstName + " " + studentObject.lastName; 
 
\t \t \t } 
 
\t \t }; 
 
\t }
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
 
<html><title>AngularJS First Application</title> 
 
\t <body><h1>Sample Application</h1> 
 
\t \t <div ng-app="" ng-controller="studentController"> 
 
\t \t \t <p> 
 
\t \t \t \t Enter your Name:<input type="text" ng-model="data"> 
 
\t \t \t </p> 
 
\t \t \t <p> 
 
\t \t \t \t Hello <span ng-bind="data"></span>! 
 
\t \t \t </p> 
 
\t \t </div> 
 

 
\t \t <br /> 
 
\t \t <table border="1px"> 
 
\t \t <tr><th>Fisrt Name</th><th>Last Name</th><th>Full Name</th></tr> 
 
\t \t <tr><td>student.firstName</td><td>student.lastName</td><td>student.fullName</td></tr> 
 

 
\t \t </table> 
 
\t \t <script src="angular.min.js"></script> 
 
\t </body> 
 
</html> 
 

 
<script> 
 
\t 
 
</script>

: Ich bin in Angular js und starten Programm zu machen, aber ng-Controller funktioniert nicht, wenn ich einen ng-Controller = "studentController" normale Winkel ng -bind = "Daten" -Programm funktioniert auch nicht. Bitte helfen Sie mir, was darin falsch ist.

Dank

Priyanka Sankhala

+1

schreiben Sie hier Ihren Code – Sajeetharan

+0

ja, Jetzt habe ich meinen Code –

+0

Mögliche Duplizieren von Post - https://stackoverflow.com/questions/26602883/angularjs-ng-controller-not-working –

Antwort

2

Es gibt viele Probleme mit Ihrem Code!

(i) Ihre Winkelversion und die Art, wie Sie den Controller definiert haben. Sie sollten ein Modulnamen wie folgt erklärt haben

ngular.module('myApp',[]) 

(ii) Verwenden Sie den Ausdruck {} mit dem Modellnamen in Ihren HTML, zB

{{student.firstName}} 

(iii) fullname ist eine Funktion so müssen Sie sich wie nennen,

<td>{{student.fullName()}}</td> 

DEMO

angular.module('myApp',[]).controller('studentController', function($scope){ 
 
    $scope.student = { 
 
\t \t \t firstName : "Mahesh", 
 
\t \t \t lastName : "Parashar", 
 
\t \t \t fullName : function() { 
 
\t \t \t \t var studentObject; 
 
\t \t \t \t studentObject = $scope.student; 
 
\t \t \t \t return studentObject.firstName + " " + studentObject.lastName; 
 
\t \t \t } 
 
\t \t }; 
 
      
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<title>AngularJS First Application</title> 
 
<body> 
 
    <h1>Sample Application</h1> 
 
    <div ng-app="myApp" ng-controller="studentController"> 
 
     <p> 
 
      Enter your Name:<input type="text" ng-model="data"> 
 
     </p> 
 
     <p> 
 
      Hello <span ng-bind="data"></span>! 
 
     </p> 
 
     <br /> 
 
     <table border="1px"> 
 
      <tr> 
 
       <th>Fisrt Name</th> 
 
       <th>Last Name</th> 
 
       <th>Full Name</th> 
 
      </tr> 
 
      <tr> 
 
       <td>{{student.firstName}}</td> 
 
       <td>{{student.lastName}}</td> 
 
       <td>{{student.fullName()}}</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</body>

+0

Dank seiner gut funktioniert. –

0

sollten Sie eine App für die Winkel definieren und fügen Sie fügen Sie einen Controller darunter

angular.module('app', []).controller('studentController', function($scope) { 
    $scope.student = { 
     firstName : "Mahesh", 
     lastName : "Parashar", 
     fullName : function() { 
      var studentObject; 
      studentObject = $scope.student; 
      return studentObject.firstName + " " + studentObject.lastName; 
     } 
    }; 
}); 

Dann den Namen der Anwendung in ng-app

0

ich versucht habe, zu modifizieren Dieses Programm ein wenig, um es funktioniert und Code ist wie folgt.

javascript.js

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

    function studentController($scope) { 
    $scope.student = { 
     firstName: "Mahesh", 
     lastName: "Parashar", 
    }; 
    $scope.getFullName = function() { 
     var studentObject; 
     studentObject = $scope.student; 
     //return studentObject.firstName + " " + studentObject.lastName; 
     $scope.student.fullName = studentObject.firstName + " " + studentObject.lastName; 
    } 
} 

Htmlpage

<html> 
<head> 
    <title>AngularJS First Application</title> 
</head> 
<body> 
    <h1>Sample Application</h1> 
    <div ng-app="app" ng-controller="studentController"> 
     <p> 
      Enter your Name:<input type="text" ng-model="data"> 
     </p> 
     <p> 
      Hello <span ng-bind="data"></span>! 
     </p> 


     <br /> 
     <table border="1px"> 
      <tr><th>Fisrt Name</th><th>Last Name</th><th>Full Name</th></tr> 
      <tr><td>{{student.firstName}}</td><td>{{student.lastName}}</td><td>{{student.fullName}}</td></tr> 
      <tr> <input type="button" value="Get Full Name" ng-click="getFullName()"/> </tr> 
     </table> 
    </div> 
    <script src="../angular.js"></script> <!--This is the angularJS libyrary file--> 
    <script src="JavaScript.js"></script> <!--This is your java script file--> 
</body> 
</html> 

Sie mich bitte, wenn Sie brauchen, wenn es für Sie arbeitet oder nicht.