Question

<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-repeat指令的内容。我无法检测到上述程序中的任何错误

Answer 1

使用$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

Answer 2

而不是

<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>

Answer 3

作为other answers correctly mentioned，您可以在控制器中使用gradle代替$scope。或者，您可以使用controller as - 语法。

this

Answer 4

除了sampleCon

之外，删除HTML中的ng-controller = "sampleCon"

sampleCon.upper至upper
sampleCon.lower至lower
sampleCon.array1至array1

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

Answer 5

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

使用$ scope和html，如

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

使用angular.js未显示内容

5 个答案: