Question

我是Angular.js的新手。尝试打印行的总数但无法访问ng-init变量（ct）。最后一个span标记未显示{{ct}}的值。我错过了什么吗？

<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:"Baguiati",
            bs:new Date("July 20 1993"),
            marks:[{it:94},{it:65},{it:82}]
        },{
            name:"Raktim",
            id:"129",
            address:"Tegharia",
            bs:new Date("September 17 1993"),
            marks:[{it:97},{it:81},{it:79}]
        },{
            name:"Kaushik",
            id:"126",
            address:"Howrah",
            bs:new Date("October 10 1992"),
            marks:[{it:81},{it:89},{it:78}]
        },{
            name:"Abhishek",
            id:"287",
            address:"Dum Dum",
            bs:new Date("December 25 1994"),
            marks:[{it:91},{it:68},{it:87}]
        }];
    app.controller("mycontroller",mycontrol)



    }());

Answer 1

尝试更改

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

到

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

这是一个有效的fiddle。

修改
Naga是正确的，它也适用于MyApp。 Myapp不起作用的原因是Angular处理指令名称的方式。在Javascript方面，Angular将您的名称转换为驼峰大小写，这基本上意味着第一个字母是小写，变量中每个“单词”的下一个字母是大写。当值以HTML表示时，它们遵循划线分隔的HTML标准，其中每个字母都是小写，并且单词由-个字符分隔。您也可以使用冒号（:）或下划线（_），但连字符是最常见的。

当您在Javascript中编写Myapp或myapp时，Angular会将其规范化为HTML中的myapp。但是当您有MyApp或myApp时，它会在HTML中变为my-app。

只要HTML和Javascript匹配，您就可以使用自己喜欢的大写字母。

无法访问ng-init值

1 个答案: