Question

我正在制作我的教程。

这是代码：

function MenuController() {
   this.showReview = true; 
   this.objects = [
  {name:'John', age:25, gender:'boy', Id:0},
  {name:'Jessie', age:30, gender:'girl', Id:1},
  {name:'Johanna', age:28, gender:'girl', Id:2},
  {name:'Joy', age:15, gender:'girl', Id:3},
  {name:'Mary', age:28, gender:'girl', Id:4},
  {name:'Peter', age:95, gender:'boy', Id:5},
  {name:'Sebastian', age:50, gender:'boy', Id:6},
  {name:'Erika', age:27, gender:'girl', Id:7},
  {name:'Patrick', age:40, gender:'boy', Id:8},
  {name:'Samantha', age:60, gender:'girl', Id:9}
]}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<table class="table table-responsive table-hover">
        <thead>
            <tr><th>Site Type</th></tr>
        </thead>
        <tbody ng-repeat="object in objects ">
            <tr>
                <td ng-bind="object.name"></td>
                <td>
<a class="btn btn-default btn-xs" ng-click="showReview = !showReview;">
<i class="glyphicon glyphicon-list-alt"></i>
           </a></td>
            </tr>
            <tr ng-if="showReview">
                <td colspan="2">dummy!</td>
            </tr>
        </tbody>
    </table>

为什么表中没有生成多行？

Answer 1

你已经接近让你的演示工作了。但是需要进行一些修改。您正在使用controllerAs语法，但没有正确引用它。您的HTML中还缺少一些其他必需的东西。看看这个plunker，您可以看到您的演示工作正常。

Plunker：http://plnkr.co/edit/funI0YxjUQi7uucJ4ptc?p=preview

HTML

<!DOCTYPE html>
<html data-ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>  
  </head>

  <body ng-controller="MenuController as ctrl">
    <table class="table table-responsive table-hover">
        <thead>
            <tr><th>Site Type</th></tr>
        </thead>
        <tbody ng-repeat="object in ctrl.objects">
            <tr>
                <td ng-bind="object.name"></td>
                <td>
<a class="btn btn-default btn-xs" ng-click="showReview = !showReview;">
<i class="glyphicon glyphicon-list-alt"></i>
           </a></td>
            </tr>
            <tr ng-if="showReview">
                <td colspan="2">dummy!</td>
            </tr>
        </tbody>
    </table>
  </body>

</html>

JS

var app = angular.module('plunker', [])
.controller('MenuController', MenuController);

function MenuController() {
   this.showReview = true; 
   this.objects = [
  {name:'John', age:25, gender:'boy', Id:0},
  {name:'Jessie', age:30, gender:'girl', Id:1},
  {name:'Johanna', age:28, gender:'girl', Id:2},
  {name:'Joy', age:15, gender:'girl', Id:3},
  {name:'Mary', age:28, gender:'girl', Id:4},
  {name:'Peter', age:95, gender:'boy', Id:5},
  {name:'Sebastian', age:50, gender:'boy', Id:6},
  {name:'Erika', age:27, gender:'girl', Id:7},
  {name:'Patrick', age:40, gender:'boy', Id:8},
  {name:'Samantha', age:60, gender:'girl', Id:9}
]}

Answer 2

检查以下修改后的代码。

   <html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body data-ng-app="app" data-ng-controller="MenuController as mc">

    <table class="table table-responsive table-hover">
        <thead>
            <tr><th>Site Type</th></tr>
        </thead>
        <tbody >
            <tr ng-repeat="object in mc.objects">
                <td ng-bind="object.name"></td>
                <td>
                    <a class="btn btn-default btn-xs" ng-click="showReview = !showReview;">
                        <i class="glyphicon glyphicon-list-alt"></i>
                    </a>
                </td>
            </tr>
            <tr ng-if="showReview">
                <td colspan="2">dummy!</td>
            </tr>
        </tbody>
    </table>
    <script>
        angular.module("app", [])
        .controller("MenuController", function () {
            this.showReview = true;
            this.objects = [
           { name: 'John', age: 25, gender: 'boy', Id: 0 },
           { name: 'Jessie', age: 30, gender: 'girl', Id: 1 },
           { name: 'Johanna', age: 28, gender: 'girl', Id: 2 },
           { name: 'Joy', age: 15, gender: 'girl', Id: 3 },
           { name: 'Mary', age: 28, gender: 'girl', Id: 4 },
           { name: 'Peter', age: 95, gender: 'boy', Id: 5 },
           { name: 'Sebastian', age: 50, gender: 'boy', Id: 6 },
           { name: 'Erika', age: 27, gender: 'girl', Id: 7 },
           { name: 'Patrick', age: 40, gender: 'boy', Id: 8 },
           { name: 'Samantha', age: 60, gender: 'girl', Id: 9 }
            ]
        });


    </script>
</body>
</html>

问题： 1-更好地将ng-repeate放在tr。

2- ng-app和ng-controller缺失。

为什么表中没有生成多行？

2 个答案: