不显示角度JS值，而是显示表达式

-1

第一个div显示总数。第二个div显示角度表达而不是总值。请帮助理解为什么会发生这种情况，以及如何用价值取代表达。不显示角度JS值，而是显示表达式

以下是HTML代码。

<div data-ng-app="" data-ng-init="quantity=1;price=5"> 

<h2>Cost Calculator</h2> 

Quantity: <input type="number" ng-model="quantity"> 
Price: <input type="number" ng-model="price"> 

<p><b>Total in dollar:</b> {{quantity * price}}</p> 

</div> 

<div data-ng-app="as" data-ng-init="quantityas=1;priceas=5"> 

<h2>Cost Calculator</h2> 

Quantity: <input type="number" ng-model="quantityas"> 
Price: <input type="number" ng-model="priceas"> 

<p><b>Total in dollar:</b> {{quantityas * priceas}}</p> 

</div>

下面是输出

enter image description here

来源

2017-07-08 Keval Raj

张贴在错误的HTML – Sajeetharan

检查控制台您的代码.. –

我使用这个程序，我两次删除线和作品。在HTML中只能声明一个应用程序（<div ng-app="myApp" ng-controller="AppCtrl">）。谢谢你们所有的答复。这帮助我理清问题

下面是工作HTML

<!DOCTYPE html> 
<html> 
<head> 

</head> 

<body> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script> 
var app = angular.module('myApp', []); 
app.controller('AppCtrl', function($scope) { 

}); 

</script> 
    <script> 
var app = angular.module('myApp1', []); 
app.controller('AppCtrl', function($scope) { 

angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) { 
    $scope.a = 1; 
    $scope.b = 2; 
}); 

}); 

</script> 

    <div ng-app="myApp" ng-controller="AppCtrl"> 
<div data-ng-init="quantity=1;price=5"> 
    <h2>Cost Calculator Quantity:</h2> 
    <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> 
<div> 
Total in dollar: {{quantity * price}} 
</div> 
</div> 




<div data-ng-init="quantity1=2;price1=7"> 
    <h2>Cost Calculator Quantity:</h2> 
    <input type="number" ng-model="quantity1"> Price: <input type="number" ng-model="price1"> 
<div> 
Total in dollar: {{quantity1 * price1}} 
</div> 
</div> 
</div> 


</body> 

</html>

来源

2017-07-08 09:04:41

可以在角

String operation ->{{"Hello" +" " + "World!" }}<hr/> 
Math operation -> {{2 * 5 }}<hr/> 
String &amp; Math operation ->{{"10 * 15 * 84 = " + (10 * 15 * 84)}}<hr/> 
Json Operation ->{{'name = ' +json[0].name + ' age =' + json[0].age}}<br/> 
{{'name = ' +json[1].name + ' age =' + json[1].age}}<hr/> 
Array operation -> <span ng-bind="{{array}}"></span>

使用表达这样

PlunkrExample

来源

2017-07-08 08:12:51

你在你的代码两次定义NG-应用。尝试在body标签内声明一次。

此外，控制器应该是通用的两个div不为每个div分开。

这将解决您的问题。 DEMO

var app = angular.module('myApp', []); 
 
app.controller('AppCtrl', function($scope) { 
 
    
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 

 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="AppCtrl"> 
 
<div data-ng-init="quantity=1;price=5"> 
 
    <h2>Cost Calculator Quantity:</h2> 
 
    <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> 
 
<div> 
 
Total in dollar: {{quantity * price}} 
 
</div> 
 
    <h2>Cost Calculator Quantity:</h2> 
 
    <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> 
 
<div> 
 
Total in dollar: {{quantity * price}} 
 
</div> 
 
</div> 
 
</div> 
 
</body> 
 

 
</html>

来源

2017-07-08 08:22:38 Sajeetharan

感谢您的回复Sajeetharan.I想我的问题是不同的。我已经重写了我的问题。请检查并帮助 –

您是否可以为您的问题创建一个运动员。现在不清楚 – Sajeetharan

@KevalRaj问题与上面提到的相同，请检查更新的演示 – Sajeetharan

文档中的第二ng-app指令已被忽略。插值绑定{{ }}是未编译并显示为纯文本。

从文档：

ngApp

使用ngApp时，有几件事情要记住：

只有一个AngularJS应用程序可以自动自举的每个HTML文档。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap来代替手动引导它们。

— AngularJS ng-app Directive API Reference

来源

2017-07-08 08:37:25 georgeawg

<!DOCTYPE html> 
<html> 
<head> 

</head> 

<body> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script> 
var app = angular.module('myApp', []); 
app.controller('AppCtrl', function($scope) { 

}); 

</script> 
    <script> 
var app = angular.module('myApp1', []); 
app.controller('AppCtrl1', function($scope) { 

}); 

</script> 

    <div ng-app="myApp" ng-controller="AppCtrl"> 
<div data-ng-init="quantity=1;price=5"> 
    <h2>Cost Calculator Quantity:</h2> 
    <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> 
<div> 
Total in dollar: {{quantity * price}} 
</div> 
</div> 
</div> 


    <div ng-app="myApp1" ng-controller="AppCtrl"> 
<div data-ng-init="quantity=1;price=5"> 
    <h2>Cost Calculator Quantity:</h2> 
    <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> 
<div> 
Total in dollar: {{quantity * price}} 
</div> 
</div> 
</div>

来源

2017-07-08 08:41:57

你可以用下面的代码检查。

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 

 

 
<div ng-app="myApp" ng-controller="OnlineShopping"> 
 
<div data-ng-app="" data-ng-init="quantity=1;price=5"> 
 

 
<h2>Cost Calculator</h2> 
 

 
Quantity: <input type="number" ng-model="quantity"> 
 
Price: <input type="number" ng-model="price"> 
 

 
<p><b>Total in dollar:</b> {{quantity * price}}</p> 
 

 
</div> 
 

 
<div data-ng-app="myApp" data-ng-init="quantityas=1;priceas=5"> 
 

 
<h2>Cost Calculator</h2> 
 

 
Quantity: <input type="number" ng-model="quantityas"> 
 
Price: <input type="number" ng-model="priceas"> 
 

 
<p><b>Total in dollar:</b> {{quantityas * priceas}}</p> 
 

 
</div> 
 
</div> 
 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller("OnlineShopping", function($scope) 
 
{ 
 
     
 
    
 
\t }) 
 
</script> 
 

 
</body> 
 
</html>

来源

2017-07-08 09:04:50 Arun

不显示角度JS值，而是显示表达式

回答

ngApp

相关问题