2017-07-18 7 views
0

私は最近angular.jsを学びました(そして私は "学習した"という言葉をゆるやかに使います)。そして、基本的なウェブサイトを作ろうとしています。私が「angular.jsで整形する」から学んだ二重括弧の表記法は、私が持っているウェブページに登録していないことに気付きました。私はこの一日中ハッキングしています。あなたはおそらく、私のコードでいくつかの問題以上のものを見ています(自由にコメントすることができます)。二重角括弧がAngular.jsに登録されていないhtml

私が話していたコード片はこれです:

<div class="divvy" ng-repeat="slider in main.sliders"> 
    <h3> 
    {{slider.name}} costs {{slider.cost | currency}} 
    </h3> 
</div> 

は、私は全体のコードが含まれますが、参考のために、「DIVVY」クラスは、画面の中央にdiv要素を作るためだけの複雑な方法であります。 私のヘッダーは、このよう読み取ります。私は本当にこれが機能しない理由のデバッグ以外にもまだそれを使って何をやっていないので、

<head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Ek+Mukta|Montserrat" rel="stylesheet"> 
    <script type="text/javascript" src="script.js"></script> 
    <script type="text/javascript" src="//code.angularjs.org/snapshot/angular.min.js"></script> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    </head> 

そして、script.jsファイルには、かなり単純です。

(function(){ 
var app = angular.module("myModule",[]); 
app.controller('MainController',function(){ 
    this.products= sliders; 
}); 


var sliders= [ 

    {name: "Charles", 
    cost: "4.20" 
    }, 
    { 
    name:"Alfred", 
    cost:"30" 
    }, 
    { 
    name:"Something that costs 10 bucks", 
    cost:"10.1" 
    } 



    ] 

    })() 

私を助けてください。私は修正しようとしていた何かが、もはや角度を正しく使うことができないようにしていたと思う。(そこにはテキストを編集するためのボタンがあります。いくつかのCtrl + Zを押して私の場所を失った後)。 また、余分な時間がある場合は、バックグラウンドの画像があります。これは、どのように中心を合わせて「ズーム - プルーフ」にするかを考えるのに多くの時間を費やしましたが、動的に編集したい(スライドやフェードチェンジ)しかし、バックグラウンドimgはstyle.css html {}に詰まっています...そして、 "myStyle"を使ってそれを編集する方法や、最初にng-myStyleを使う方法もわかりません。ありがとうございました。完全なコードは、ここで、plunkerである:https://plnkr.co/edit/H4uhcU

答えて

1

それは、

<div class="divvy" ng-repeat="slider in main.products"> 

DEMO

var app = angular.module("myModule",[]); 
 
app.controller('MainController',function(){ 
 
    var sliders= [ 
 
    {name: "Charles", 
 
    cost: "4.20" 
 
    }, 
 
    { 
 
    name:"Alfred", 
 
    cost:"30" 
 
    }, 
 
    { 
 
    name:"Something that costs 10 bucks", 
 
    cost:"10.1" 
 
    }]; 
 

 
    this.products= sliders; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app= "myModule" ng-controller="MainController as main"> 
 
<div class="divvy" ng-repeat="slider in main.products"> 
 
    <h3> 
 
    {{slider.name}} costs {{slider.cost | currency}} 
 
    </h3> 
 
</div> 
 

+0

でなければなりませんねえ、これは私のために働いていません。私は問題が何であるかはわかりませんが、直接関連していないコードのほとんどを取り出して、 "readme"に入れました; 私は新しいプランナーをアップロードしました:https://plnkr.co/edit/H4uhcU – Quibble

+0

あなたはプランナーのscript.jsを参照していません。ここで確認してくださいhttps://plnkr.co/edit/Y7YhbX?p=preview – Sajeetharan

+0

これはうまくいきました。問題は、script.jsの参照がgoogle apiスクリプトのリファレンスより前であることでした。ありがとう:) – Quibble

関連する問題