Der angulare JS-Wert wird nicht angezeigt, stattdessen wird der Ausdruck angezeigt

-1

Das erste div wird insgesamt angezeigt. Das zweite div zeigt den Winkelausdruck anstelle des Gesamtwerts an. Bitte helfen Sie zu verstehen, warum dies passiert ist und wie Sie anstelle von Ausdruck Wert erhalten.Der angulare JS-Wert wird nicht angezeigt, stattdessen wird der Ausdruck angezeigt

Unten ist HTML-Code.

<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>

Unten ist der Ausgang

enter image description here

Quelle

2017-07-08 Keval Raj

posten Sie Ihre Code in html – Sajeetharan

prüfen Konsole für Fehler .. –

ich diese App zweimal wurde mit entfernte ich die Linie und arbeitet. Es darf nur eine App in HTML deklariert werden (<div ng-app="myApp" ng-controller="AppCtrl">). Danke Jungs für alle Ihre geantwortet. Das half mir, die Frage zu klären,

unten ist die Arbeits 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>

Quelle

2017-07-08 09:04:41

können Sie Ausdruck in Winkel

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

Quelle

2017-07-08 08:12:51

Sie definieren ng-App zweimal in Ihrem Code verwenden . Versuchen Sie es einmal innerhalb des Body-Tags zu deklarieren.

Auch der Controller sollte für beide divs nicht gemeinsam für jeden divs getrennt sein.

Dies wird Ihr Problem lösen. 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>

Quelle

2017-07-08 08:22:38 Sajeetharan

Vielen Dank für Ihre Antwort, mein Problem Sajeetharan.I denken anders. Ich habe meine Frage erneut gestellt. Bitte überprüfen und helfen –

können Sie einen Plünderer für Ihr Problem erstellen. gerade jetzt ist es nicht klar – Sajeetharan

@KevalRaj Problem ist das gleiche wie oben erwähnt, überprüfen Sie die aktualisierte Demo – Sajeetharan

Die zweite ng-app Richtlinie im Dokument ignoriert wurde. Interpolationsbindungen {{ }} sind nicht kompiliert und als Nur-Text anzeigen.

Aus dem Text & Tabellen:

ngApp

Es gibt ein paar Dinge im Auge zu behalten, wenn ngApp mit:

nur einer AngularJS Anwendung kann seine Auto-Bootstrap per HTML-Dokument . Der erste im Dokument gefundene Name ngApp wird verwendet, um das Root-Element für den automatischen Bootstrapping als Anwendung zu definieren. Um mehrere Anwendungen in einem HTML-Dokument auszuführen, müssen Sie sie manuell unter Verwendung von angular.bootstrap starten.

— AngularJS ng-app Directive API Reference

Quelle

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>

Quelle

2017-07-08 08:41:57

können Sie mit folgendem Code überprüfen.

<!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>

Quelle

2017-07-08 09:04:50 Arun

Der angulare JS-Wert wird nicht angezeigt, stattdessen wird der Ausdruck angezeigt

Antwort

ngApp

Verwandte Themen