2016-08-13 30 views
1

角度クラスをオンラインにして、ng-initを使用する方法に問題があると、ブラウザで開いたときに同じコードが表示されます。この問題を解決する方法については、 。あなたがdivの本体でng-initディレクティブを配置した私は、JSONファイル内の角度バージョンを変更しようとしたが、それはwork.Thankあなた角度がブラウザに結果を表示しない

<!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 href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
 
    <link href="styles/mystyles.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
     <div class="row row-content"> 
 
        ng-init=" 
 
         dish= 
 
         { 
 
          name:'Uthapizza', 
 
          image: 'images/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.', 
 
          comment: '' 
 
         }"> 
 
      <div class="col-xs-12"> 
 
        <div class="media"> 
 
        <div class="media-left media-middle"> 
 
         <a href="#"> 
 
         <img class="media-object img-thumbnail" 
 
         ng-src={{dish.image}} alt="Uthappizza"> 
 
         </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> 
 
           <p>Comment: {{dish.comment}}</p> 
 
         <p>Type your comment: 
 
         <input type="text" ng-model="dish.comment"></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    
 
<script src="../bower_components/angular/angular.min.js"></script> 
 
</body> 
 

 
</html>

答えて

0

ませんでした。以下に示すように

ディレクティブはdivタグとインラインでなければなりません:

<div class="row row-content" ng-init="dish={}"> 

</div> 

また、私はng-appディレクティブは表示されません。あなたの体にAngularJSがあなたのアプリケーションにフックできるようにするにはこれが必要です。これはng-initディレクティブの前に置かれます。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app=""> 
 

 
    <div class="row row-content" ng-init="dish= 
 
         { 
 
          name:'Uthapizza', 
 
          image: 'images/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.', 
 
          comment: '' 
 
         }"> 
 

 
    <p> 
 
     {{dish.name}} 
 
    </p> 
 
    
 
    <p> 
 
     {{dish.category}} 
 
    </p> 
 

 
    </div> 
 

 
</div>

あなたはこの作業を実証するために、私はまたJSFiddleを作成している:あなたはAngularJSコントローラを見てみたいことがあり、追加の注意点としては

https://jsfiddle.net/65LaufpL/

をし、 dishの変数をを使用するよりもはるかにきれいに保存します指示。

+0

ありがとうございました!ng-​​appディレクティブは、!DOCTYPEの後にに配置されています。 – Kwaku

0

ng-initディレクティブをdivタグの属性として配置する必要があります。

<div class="row row-content" ng-init="dish={ 
    name:'Uthapizza', 
    image: 'images/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.', 
    comment: '' 
}"> 
+0

ありがとうございました – Kwaku

関連する問題