Question

我正在尝试做一个简单的练习，但它不起作用。我想我不会恰当地调用控制器变量。我被封锁了。我该如何修复此代码？结果页面显示：{{dish.name}} {{dish.label}} {{dish.price |货币}}

<html lang="en" ng-app="a">

<head>.... </head>

<body>

    <div class="container">
        <div class="row row-content" ng-controller="dishDetailController as dishDC">
            <div class="col-xs-12">
                <p>Put the dish details here</p>
                <div class="media-body">
                  <ul class="media-list">
                    <li class="media" ng-repeat="dish in dishDC.dishes">
                    <div class="media-left media-middle">
                        <a href="#">
                        <img class="media-object img-thumbnail"
                         ng-src={{dish.image}} alt="a">
                        </a>
                    </div>
                    <div class="media-body">
                        <h2 class="media-heading">{{dish.name}}
                         <span class="label label-danger">{{dish.label}}</span>
                         <span class="badge">{{dish.price | currency}}</span></h2>
                        <p>{{dish.description}}</p>
                    </div>
                    </li>
                  </ul>
                </div>
            </div>
            <div class="col-xs-9 col-xs-offset-1">
                <p>Put the comments here</p>
            </div>
        </div>

    </div>

    <script src="../bower_components/angular/angular.min.js"></script>
    <script>

        var app = angular.module('confusionApp',[]);

        app.controller('dishDetailController', function() {

            var dishes={
                          name:'a',
                          image: 'images/a.png',
                          category: 'a',
                          label:'a',
                          price:'7.88',
                          description:'a',

                    };

            this.dishes = dishes;

        });

    </script>

</body>

</html>

Answer 1

ng-repeat需要一个数组并将遍历它。您正在传递一个不是数组的对象。把它改成一个对象数组，一定很好。

<div class="container">
    <div class="row row-content" ng-controller="dishDetailController as dishDC">
        <div class="col-xs-12">
            <p>Put the dish details here</p>
            <div class="media-body">
              <ul class="media-list">
                <li class="media" ng-repeat="dish in dishDC.dishes">
                <div class="media-left media-middle">
                    <a href="#">
                    <img class="media-object img-thumbnail"
                     ng-src={{dish.image}} alt="a">
                    </a>
                </div>
                {{dish.name}}
                <div class="media-body">
                    <h2 class="media-heading">{{dish.name}}
                     <span class="label label-danger">{{dish.label}}</span>
                     <span class="badge">{{dish.price | currency}}</span></h2>
                    <p>{{dish.description}}</p>
                </div>
                </li>
              </ul>
            </div>
        </div>
        <div class="col-xs-9 col-xs-offset-1">
            <p>Put the comments here</p>
        </div>
    </div>

</div>

<script src="angular.min.js"></script>
<script>

    var app = angular.module('confusionApp',[]);

    app.controller('dishDetailController', function() {

        this.dishes=[{
                      name:'James',
                      image: 'images/James.png',
                      category: 'HouseHold',
                      label:'Lab',
                      price:'7.88',
                      description:'Desc',

                }];



    });

</script>

Answer 2

我认为可能是因为您尚未为应用程序定义ng-app指令。

尝试在您的ng-app中添加confusionApp，如下所示：

 <html lang="en" ng-app="confusionApp">

使用ng-controller指令从AngularJS开始

2 个答案: