內容沒有顯示使用angular.js

<html ng-app = "sampleMod"> 
    <head> 

    </head> 

    <body ng-controller = "sampleCon"> 
     <script src = "bower_components/angular/angular.min.js"></script> 
     <h1>Filters example</h1> 
     Comments (upper) :- <input type = "text" ng-model = "sampleCon.upper"><br> 
     {{sampleCon.upper | uppercase}}<br> 
     Comments (lower) :- <input type = "text" ng-model = "sampleCon.lower"><br> 
     {{sampleCon.lower | lowercase}}<br> 
     <button type = "button">Name</button> 
     <button type = "button">Age</button> 
     <div> 
      <ul> 
       <li ng-repeat = "person in sampleCon.array1"> 
        <b>Name</b> - {{person.name}}<br> 
        <b>Age</b> - {{person.age}}<br><br> 
       </li> 
      <ul> 
     </div> 

     <script> 
      app = angular.module("sampleMod",[]); 
      app.controller("sampleCon",function(){ 
       this.upper = ""; 
       this.lower = ""; 
       this.array1 = [{name:"sahib", 
           age:17}, 
           {name:"kukku", 
           age:25}, 
           {name:"meena", 
           age:45}, 
           {name:"ayaan", 
           age:2}, 
          ] 
      }); 
     </script> 
    </body> 
</html>

我犯了採用了棱角分明的JS網頁，一切似乎都很好地工作，但具有NG重複指令內容不顯示在屏幕上。我是無法檢測任何錯誤上述程序內容沒有顯示使用angular.js

來源

2016-09-28 Sahib Navlani

當你標記答案的那些優先考慮誰的答案快 – Sajeetharan

在你的HTML除了ng-controller = "sampleCon"

sampleCon.upper到upper
sampleCon.lower到lower
sampleCon.array1到到處刪除

或者只是做ng-controller = "sampleCon as sampleCon"

來源

2016-09-28 13:03:11 taguenizy

使用$scope變量代替此，

$scope.upper = ""; 
$scope.lower = ""; 
$scope.array1 = [{name:"sahib", 
           age:17}, 
           {name:"kukku", 
           age:25}, 
           {name:"meena", 
           age:45}, 
           {name:"ayaan", 
           age:2}, 
          ]

和HTML應，

<h1>Filters example</h1> 
     Comments (upper) :- <input type = "text" ng-model = "upper"><br> 
     {{upper | uppercase}}<br> 
     Comments (lower) :- <input type = "text" ng-model = "lower"><br> 
     {{lower | lowercase}}<br> 
    <div> 
     <ul> 
      <li ng-repeat = "person in array1"> 
       <b>Name</b> - {{person.name}}<br> 
       <b>Age</b> - {{person.age}}<br><br> 
      </li> 
     <ul> 
    </div>

DEMO

來源

2016-09-28 12:56:52 Sajeetharan

代替

<li ng-repeat = "person in sampleCon.array1"> 
        <b>Name</b> - {{person.name}}<br> 
        <b>Age</b> - {{person.age}}<br><br> 
       </li>

使用

<li ng-repeat = "person in array1"> 
        <b>Name</b> - {{person.name}}<br> 
        <b>Age</b> - {{person.age}}<br><br> 
       </li>

來源

2016-09-28 12:56:54

正如other answers correctly mentioned你可以用$scope而不是this在你的控制器。或者，您可以使用controller as-語法。

</head> 

<body ng-controller = "sampleCon as ctrl"> <!-- Name your controller 'ctrl' --> 
    <script src = "bower_components/angular/angular.min.js"></script> 
    <h1>Filters example</h1> 
    Comments (upper) :- <input type = "text" ng-model = "ctrl.upper"><br> 
    {{ctrl.upper | uppercase}}<br> 
    Comments (lower) :- <input type = "text" ng-model = "ctrl.lower"><br> 
    {{ctrl.lower | lowercase}}<br> 
    <button type = "button">Name</button> 
    <button type = "button">Age</button> 
    <div> 
     <ul> 
      <li ng-repeat = "person in ctrl.array1"> 
       <b>Name</b> - {{person.name}}<br> 
       <b>Age</b> - {{person.age}}<br><br> 
      </li> 
     <ul> 
    </div> 

    <script> 
     app = angular.module("sampleMod",[]); 
     app.controller("sampleCon",function(){ 
      var vm = this; 
      vm.upper = ""; 
      vm.lower = ""; 
      vm.array1 = [{name:"sahib", 
          age:17}, 
          {name:"kukku", 
          age:25}, 
          {name:"meena", 
          age:45}, 
          {name:"ayaan", 
          age:2}, 
         ] 
     }); 
    </script> 
</body>

來源

2016-09-28 13:01:52 smoksnes

app.controller("sampleCon",function($scope){ 
    $scope.upper = ""; 
    $scope.lower = ""; 
    $scope.array1 = [{name:"sahib", 
         age:17}, 
           {name:"kukku", 
           age:25}, 
          ] 
    });

使用$範圍，和HTML一樣

<li ng-repeat = "person in array1"> 
       <b>Name</b> - {{person.name}}<br> 
       <b>Age</b> - {{person.age}}<br><br> 
      </li>

來源

2016-09-28 13:03:14 dinesh

內容沒有顯示使用angular.js

回答

相關問題