2016-08-12 98 views
1

我是Angular.js的新手。試圖打印總行數,但不能訪問變量(ct)。最後一個span標籤沒有顯示{{ct}}的值。我錯過了什麼嗎?無法訪問ng-init值

<div id="test-area" ng-controller="mycontroller" > 
     <input type="number" step="1" max="5" min="1" ng-model="count" style="width:50px;"/> 

     <input type="number" step="1" max="4" min="0" ng-model="indexFrom" style="width:50px;"/> 
     <table class="tab1"> 
      <thead> 
      <th>Name</th> <th>Id</th> <th>Address</th> <th>Number</th> 
       <th>Date</th> 
      </thead> 
     <tr ng-repeat="user in users | limitTo:count:indexFrom " ng-init="parent=user;$parent.ct=$index"> 
     <td>{{user.name | uppercase}}</td> 
     <td> {{user.id | number }}</td> 
     <td>{{user.address |lowercase}}</td> 
      <td ng-bind="parent.marks[0].it |currency:'$'"> 
      </td> 
      <td class="ng-bind:user.bs | date:'dd/MM/yyyy'"> 

      </td> 
     </tr> 
     </table> 
      <br/> 
     <span class="gray">Total Row Number : {{ct}} | From {{indexFrom}} to {{indexFrom+count}} </span> 
     <br/> 



    </div> 

JS:

(function(){ 

    var app=angular.module("Myapp",[]); 
    var mycontrol=function($scope){ 
     $scope.users=users; 
     $scope.increment=increment; 
     $scope.change=change; 
     $scope.count=3; 
     $scope.indexFrom=0; 
    } 
    //marks increment 
    var increment=function(marks){ 
     marks.it+=1; 
    } 
    //id increment 
    var change=function(num){ 
     num.id=Number(num.id)+1; 
    } 
    var users=[{ 
      name:"Nihar", 
      id:"123", 
      address:"new town", 
      bs:new Date("April 30 1993"), 
      marks:[{it:90},{it:88},{it:97}] 
     },{ 
      name:"Nilanjan", 
      id:"194", 
      address:"baguiaty", 
      bs:new Date("October 20 1993"), 
      marks:[{it:94},{it:65},{it:82}] 
     },{ 
      name:"raktim", 
      id:"129", 
      address:"new town", 
      bs:new Date("November 20 1994"), 
      marks:[{it:97},{it:81},{it:79}] 
     },{ 
      name:"kaushik", 
      id:"126", 
      address:"Howrah", 
      bs:new Date("November 20 1994"), 
      marks:[{it:81},{it:89},{it:78}] 
     },{ 
      name:"Malhotra", 
      id:"287", 
      address:"dumDum", 
      bs:new Date("july 23 1994"), 
      marks:[{it:91},{it:68},{it:87}] 
     }]; 
    app.controller("mycontroller",mycontrol) 



    }()); 
+1

我們可以看到JS嗎? –

+0

爲了進一步擴展Danny的回答:我們有0個線索是錯誤的,因爲你沒有向我們展示代碼的最重要方面。你有一個JavaScript問題,但你沒有顯示我們的JavaScript。 –

+0

當然,我要添加Js –

回答

1

嘗試改變

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

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

這裏的工作fiddle

編輯:
娜迦是正確的,它將與MyApp正常工作。 Myapp不起作用的原因是Angular處理指令名稱的方式。在Javascript方面,Angular將您的名字轉換爲駱駝案例,它基本上意味着第一個字母是小寫字母,並且變量中每個「word」的下一個字母都是大寫。當這些值用HTML表示時,它們遵循HTML標準短劃線,其中每個字母都是小寫,單詞之間用-字符分隔。您也可以使用冒號(:)或下劃線(_),但連字符是最常用的。

當您在您的Javascript中編寫Myappmyapp時,Angular將其歸爲HTML中的myapp。但是,當您有MyAppmyApp時,它將變爲HTML中的my-app

只要HTML和Javascript匹配,您就可以使用任何您喜歡的大小寫。

+1

它適用於任何情況下,這不是與myApp案件的問題 - http://codepen.io/nagasai/pen/OXdVzj檢查一次 –

+0

你能解釋一下,爲什麼會發生? –