使用AngularJS将模型变量从控制器传递到html_Angularjs_Angularjs Controller

使用AngularJS将模型变量从控制器传递到html

angularjs

使用AngularJS将模型变量从控制器传递到html,angularjs,angularjs-controller,Angularjs,Angularjs Controller,我对AngularJs很陌生。在我的示例中，我试图使用AngularJs标记从控制器模型中读取两个initiger值，并在html页面中读取多个该值控制器 Html AngularJs表格测试2 数量：成本：总计：{{invoice.qty*invoice.cost | currency} 您在html中提到了多个ng应用程序在标记中使用ng app=“Invoice1”，移除另一个，就可以开始了 <!DOCTYPE html> <html ng-app="Invoi

我对AngularJs很陌生。在我的示例中，我试图使用AngularJs标记从控制器模型中读取两个initiger值，并在html页面中读取多个该值

控制器 Html


AngularJs表格测试2
数量：
成本：
总计：{{invoice.qty*invoice.cost | currency}

您在html中提到了多个

ng应用程序
在
标记中使用ng app=“Invoice1”
，移除另一个，就可以开始了
<!DOCTYPE html>
<html ng-app="Invoice1">
<head>
 <title>AngularJs Form Test 2</title>
 <link href="Content/bootstrap.min.css" rel="stylesheet" />
 <script src="Scripts/angular.min.js"></script>

<script src="invController.js"></script>
</head>
 <body>
  <div id="calculateNumber" ng-controller="InvoiceController as invoice">
    <div>
        Quantity : <input type="number" min="0" ng-model="invoice.qty" />
    </div>
    <div>
        Costs : <input type="number" min="0" ng-model="invoice.cost" />
    </div>
    <div>
        <b>Total: </b> {{invoice.qty * invoice.cost | currency}}
    </div>
  </div>
 </body>
</html>


AngularJs表格测试2
数量：
成本：
总计：{{invoice.qty*invoice.cost | currency}

以下是更新后的
我通过将控制器javaScript代码更改为
var myApp2 = angular.module('Invoice1', []);

myApp2.controller('InvoiceController', function ($scope) {
   $scope.qty = 1;
   $scope.cost = 2;
});

我看不到“Total”行的任何乘法在html中显示为-->总计：{{{invoice.qty*invoice.cost | currency}如果您嵌套了ng app
属性，这可能会导致问题（）invController.js是否已正确加载并在输入中显示1和2？我相信，即使您从plunker中的html标记中删除了ng应用程序标记，您也不必为同一模块测量两次ng应用程序的尺寸。。。它仍然有效！我认为这是一个引用问题，因为我刚刚在同一个页面上用javascript和html做了另一个例子。i、 e.在html中嵌入angularjs控制器，并且可以正常工作。只保留一个ng应用程序
。无论是在上面的
标签中还是标签中。只需确保它出现在/ng控制器更新plunkr:）之前，非常感谢它能工作。。。我的答案也略有不同。。。我在你的答案上给了你分数。。。
<!DOCTYPE html>
<html ng-app="Invoice1">
<head>
 <title>AngularJs Form Test 2</title>
 <link href="Content/bootstrap.min.css" rel="stylesheet" />
 <script src="Scripts/angular.min.js"></script>

<script src="invController.js"></script>
</head>
 <body>
  <div id="calculateNumber" ng-controller="InvoiceController as invoice">
    <div>
        Quantity : <input type="number" min="0" ng-model="invoice.qty" />
    </div>
    <div>
        Costs : <input type="number" min="0" ng-model="invoice.cost" />
    </div>
    <div>
        <b>Total: </b> {{invoice.qty * invoice.cost | currency}}
    </div>
  </div>
 </body>
</html>

var myApp2 = angular.module('Invoice1', []);

myApp2.controller('InvoiceController', function ($scope) {
   $scope.qty = 1;
   $scope.cost = 2;
});