2つの値を掛ける

私はAngularJSの初心者ですが、完全に混乱していますが、最終的な答えを得るためにテキストボックスに2つの値を掛けたいのですが、このコードはそれらを乗算しません。私が間違っていることを教えてください。以下はそのコードです。2つの値を掛ける

<!DOCTYPE html> 

<head> 
    <title> PixsarApp Content Management System</title> 
<script src= "~/Scripts/angular.js"></script> 
</head> 
<body data-ng-app="Demo" > 


    <h1>PixsarApp Content Management System</h1> 



    Enter Numbers to Multiply: 
    <input type="text" data-ng-model="Num1" /> x <input type="text" data-ng-model="Num2" /> = <span>{{Num1*Num2}}</span> 


</body> 
</html>

アムは、Visual Studioを使用して、2012年

すでにDemoでng-appを指定されたあなたが名前Demoと角度のモジュールを定義する必要が

出典

2016-12-18 Lutaaya Huzaifah Idris

私の出力、モジュール名。現在のケースでは、名前がDemoで定義されたモジュールがないため、失敗しています。またangular.jsの参照の後にページのapp.jsファイルを参照して下さい。

app.js

angular.module('Demo', []) 
.controller('mainController', function($scope){ 
    $scope.Num1 = 0 
    $scope.Num2 = 0 
});

マークアップ

<head> 
    <title> PixsarApp Content Management System</title> 
    <script src= "~/Scripts/angular.js"></script> 
    <script src= "~/Scripts/app.js"></script> 
</head> 
<body data-ng-app="Demo" ng-controller="mainController"> 
    <h1>PixsarApp Content Management System</h1> 
    Enter Numbers to Multiply: 
    <input type="number" data-ng-model="Num1" /> 
    x 
    <input type="number" data-ng-model="Num2" /> 
    = 
    <span>{{Num1*Num2}}</span> 
</body>

Demo Plunkr

あなたの問題のための簡単な修正はちょうどを削除するだろうけどあなたのhtmlコードからしかし、moduleを定義することなく角度アプリケーションを実行するのは良い方法ではないでしょう。だから私は答えの第一部を持っている。このパラは、私がやるべきことではありません。

出典

2016-12-18 13:26:52

したがって、app.jsという別のスクリプトを作成し、私はinsodeにScriptsフォルダを入れますか？ @Pankaj –

@LutaayaHuzaifahIdrisアプリケーションから 'data-ng-app =" Demo "を削除するだけで動作しますが、モジュールを作成してコンポーネントを接続するのがベストプラクティスです。 –

これはまだ拒否されています。私の出力@Pankaj –

2つの値を掛ける

答えて

関連する問題