Rajesh Dey Rajesh Dey -4 years ago 118
Javascript Question

AngularJS ng-app not working second time

I am trying to create a basic label program with Angular JS. And it is my first program in angular. So I can not figure it out why the following code is not working.

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="invoice.qty"
required>
</div>
<div>
Costs: <input type="number" min="0" ng-model="invoice.cost" required>
<select ng-model="invoice.inCurr">

<option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
<div>
<b>Total:</b> <span ng-repeat="c in invoice.currencies">
{{invoice.total(c) | currency:c}} </span><br>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div>
Costs: <input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:&#8377;</b> {{qty * cost}}
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/convert.js"></script>


the first part if the code is working perfectly, but the second part does not, however if I switch the div structure location, then the again the first section is working, 2nd does not, means there is a silly mistake that I can not able to find out. Please let me know my fault.

Answer Source

Generally you don't need two "ng-app". Try to put the second section into the first one. Your code should be like this:

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="invoice.qty" required>
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="invoice.cost" required>
    <select ng-model="invoice.inCurr">

            <option ng-repeat="c in invoice.currencies">{{c}}</option>
        </select>
  </div>
  <div>
    <b>Total:</b> <span ng-repeat="c in invoice.currencies">
            {{invoice.total(c) | currency:c}} </span><br>
    <button class="btn" ng-click="invoice.pay()">Pay</button>
  </div>
  <div ng-init="qty=1;cost=2">
    <b>Invoice:</b>
    <div>
      Quantity: <input type="number" min="0" ng-model="qty">
    </div>
    <div>
      Costs: <input type="number" min="0" ng-model="cost">
    </div>
    <div>
      <b>Total:&#8377;</b> {{qty * cost}}
    </div>
  </div>
</div>

<script src="js/angular.js"></script>
<script src="js/convert.js"></script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download