使用ng-controller指令從AngularJS開始

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 個解決方案

解決方案1
1 2016-02-08 23:54:29

解決方案2
0 2016-02-07 21:25:07

使用ng-controller指令從AngularJS開始

問題描述

2 個解決方案

解決方案1 1 2016-02-08 23:54:29

解決方案2 0 2016-02-07 21:25:07

解決方案1
1 2016-02-08 23:54:29

解決方案2
0 2016-02-07 21:25:07