Javascript 从AngularJS开始使用；ng控制器指令_Javascript_Angularjs_Twitter Bootstrap

Javascript 从AngularJS开始使用；ng控制器指令

javascript angularjs twitter-bootstrap

Javascript 从AngularJS开始使用；ng控制器指令,javascript,angularjs,twitter-bootstrap,Javascript,Angularjs,Twitter Bootstrap,我试着做一个简单的练习，但不起作用。我想我没有恰当地调用控制器变量。我被封锁了。如何修复此代码？结果页面显示：{{dish.name}{{dish.label}{{dish.price | currency}} <html lang="en" ng-app="a"> <head>.... </head> <body> <div class="container"> <div class="row r

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

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


.... 
把菜的细节放在这里


{{dish.name}
{{dish.label}
{{dish.price | currency}
{{dish.description}}


把评论放在这里
var-app=angular.module（'confusionApp'，[]）；
app.controller（'dishdailcontroller'，function（）{
var盘子={
姓名：'a'，
图像：“images/a.png”，
类别:"a",，
标签：'a'，
价格：'7.88'，
描述：'a'，
};
这道菜=盘子；
});

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

尝试在ng应用程序中添加confusionApp，如下所示：

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

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>


把菜的细节放在这里


{{dish.name}
{{dish.name}
{{dish.label}
{{dish.price | currency}
{{dish.description}}


把评论放在这里
var-app=angular.module（'confusionApp'，[]）；
app.controller（'dishdailcontroller'，function（）{
这是我的菜=[{
姓名:"詹姆斯",，
图片：“images/James.png”，
类别:"住户",，
标签：'实验室'，
价格：'7.88'，
描述：'Desc'，
}];
});