學習來自控制器的角度不顯示數據在圖

//Index.html

<!DOCTYPE html> 
<html ng-app="myModule"> <!--LINK TO MODULE--> 
<head> 
    <script src="Scripts/jquery-1.9.1.min.js"></script> 
    <script src="Scripts/angular.min.js"></script> 
    <script src="Scripts/bootstrap.min.js"></script> 
    <script src="Scripts/Script.js"></script> 
</head> 
<body ng-controller="myController"> <!--LINK TO CONTROLLER--> 
    <div ng-controller="myController"> <!--LINK TO CONTROLLER--> 
    {{ message }} <!--LINK TO THE SCOPE IN THE CONTROLLER*/--> 
    </div> 
    <div> 
     {{ message }} <!--DATA BINDING FROM MESSAGE PROPERTY OF SCOPE OBJECT--> 
    </div> 
    <div> 
     is 1 == to 2 {{ 1==2}} 
     <br /> 
     only output name {{ {name: 'marty', age:'30'}.name }} 
     <br /> 
     only output name from array {{ ['marty','john','kelly'][2]}} 

    </div> 
    <div> 
      40 + 50 = {{40+50}} 
    </div> 
    <div> 
     <br /> 
     <div> 
      FirstName : {{ employee.firstName }} 
     </div> 
     <div> 
      LastName : {{ employee.lastName }} 
     </div> 
     <div> 
      Gender : {{ employee.gender }} 
     </div> 
    </div> 
</body> 
</html>

//Script.js

/// <reference path="angular.min.js" /> 

//REGISTER THE CONTROLLER WITH THE MODULE 
var myApp = angular.module("myModule", []); 

/*var myController = function ($scope) { 
    $scope.message = "Angular Tutorial"; 
};*/ 

myApp.controller("myController", function ($scope) { 
    var employee = { 
     firstName: "David", 
     lastName: "Hasting", 
     gender: "Male" 
    }; 

    $scope.message = "Angular Tutorial"; 
});

其他輸出工作正常，但它不會顯示員工的詳細信息... 任何想法，爲什麼？感謝您的幫助

//輸出

Angular Tutorial 
Angular Tutorial 
is 1 == to 2 false 
only output name marty 
only output name from array kelly 
40 + 50 = 90 

FirstName : 
LastName : 
Gender :

來源

2017-08-03 John

你必須標記在angularjs不角。 Angular爲v2/4，而Angularjs爲1. * –

您應該使用$scope.employee，而不是var，

myApp.controller("myController", function ($scope) { 
    $scope.employee = { 
     firstName: "David", 
     lastName: "Hasting", 
     gender: "Male" 
    }; 

    $scope.message = "Angular Tutorial"; 
});

DEMO

var myApp = angular.module('myModule', []); 
 

 
myApp.controller('myController', ['$scope', function($scope) { 
 
    $scope.employee = { 
 
    firstName: 'David', 
 
    lastName: 'Hasting', 
 
    gender: 'Male' 
 
    }; 
 

 
    $scope.message = 'Angular Tutorial'; 
 
}]);

<html data-ng-app="myModule"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 

 
<body data-ng-controller="myController"> 
 
    <div> 
 
    {{ message }} 
 
    </div> 
 
    <div> 
 
    {{ message }} 
 
    </div> 
 
    <div> 
 
    is 1 == to 2 {{ 1==2}} 
 
    <br /> only output name {{ {name: 'marty', age:'30'}.name }} 
 
    <br /> only output name from array {{ ['marty','john','kelly'][2]}} 
 

 
    </div> 
 
    <div> 
 
    40 + 50 = {{40+50}} 
 
    </div> 
 
    <div> 
 
    <br /> 
 
    <div> 
 
     FirstName : {{ employee.firstName }} 
 
    </div> 
 
    <div> 
 
     LastName : {{ employee.lastName }} 
 
    </div> 
 
    <div> 
 
     Gender : {{ employee.gender }} 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-08-03 05:32:44 Sajeetharan

ahh是不錯的人歡呼Sajeetharan – John

學習來自控制器的角度不顯示數據在圖

回答

相關問題