Question

为什么我没有获得dish.price，dish,description等的价值，我在这里做错了什么？

<!DOCTYPE html>
<html lang="en" ng-app>

<head>
     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head
         content must come *after* these tags -->
    <title>Ristorante Con Fusion: Menu</title>
        <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-

1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
 </head>


 <body>

<div class="container">

        <div class="row row-content"

        ng-init="         

                     dish= {
                          name:'Uthapizza',
                          image: 'D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\Image\uthapizza.png',
                          category: 'mains', 
                          label:'Hot',
                          price:'4.99',
                          description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
                           comments:''
                           }">

            <div class="col-xs-12">
                <div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src={{dish.image}} alt="Bread">
    </a>
  </div>
  <div class="media-body">
    <h2 class="media-heading">{{dish.name}}
    <span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
    
    </h2>
       <p>{{dish.description}}</p>
    
  </div>
  </div>
               
            </div>
            
        </div>
    </div>

       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <!--<script src"./bootstrap-3.3.6-dist/js/bootstrap-3.3.6-dis/angular2.min.js"></script>-->
            <!--<script src="D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\jsangular2.min.js"></script>-->


 </body>  
 </html>

Answer 1

做了一些改动并使用了一个控制器，现在一切都很好：）

问题是，我认为至少不确定，但您在图片路径中使用了\这就是为什么我这样做\/然后它不是问题。< / p>

<强>样本

＆＃13;

var app = angular.module('App', []);

app.controller('MainCtrl', function($scope) {
  $scope.dish = {
    name: 'Uthapizza',
    image: 'D:\/Ericoll\/bootstrap-3.3.6-dist\/bootstrap-3.3.6-dist\/Image\/uthapizza.png',
    category: 'mains',
    label: 'Hot',
    price: '4.99',
    description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
    comments: ''
  };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="App">

<head>
  <title>Ristorante Con Fusion: Menu</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="container">
    <div class="row row-content">
      <div class="col-xs-12">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src={{dish.image}} alt="Bread">
            </a>
          </div>
          <div class="media-body">
            <h2 class="media-heading">{{dish.name}}
    <span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
    </h2>
            <p>{{dish.description}}</p>
          </div>
        </div>

      </div>

    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

dish.image的值是问题 - 避免使用反斜杠或逃避它

Answer 3

我执行了你的代码。问题在于图像部分，如果从ng-init中删除图像，您的代码将正常工作。对于图像路径，请避免反弹。

Angular表达式未得到评估

3 个答案: