forum

home / developersection / forums / how to use multiple ng-app in a single page

Ask Question

How to use Multiple ng-App in a single Page

Anonymous User 2049 22-Feb-2016
We want to use  to use Multiple ng-App  in a single Page. How to do this please help me.
angular js jquery  angular js 
Updated on 22-Feb-2016
Anonymous User

Other

I am a content writter !

Follow Message
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

22-Feb-2016
js file: 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Scripts/angular.js"></script>
 
    <title>Forum</title>
</head>
<body>
    <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
        <h1>Your order</h1>
        <table>
            <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody ng-repeat="item in
items">
                <tr>
                    <td>{{item.product_name}}</td>
                    <td>{{item.price | currency}}</td>
                    <td>
                        <button ng-click="remove($index);">Remove</button>
                    </td>
 
                </tr>
            </tbody>
 
        </table>
 
    </div>
    <div id="App2" ng-app="namesList" ng-controller="NamesController">
        <h1>Customer Details</h1>
       Name: <input id="name" type="text" ng-model="Name" />
        <br />
      Email: 
<input id="email" type="text" ng-model="Email" />
        <br />
       Contact: 
<input id="contact" type="text" ng-model="mobile_no" />
    </div>
    <script>
        var shoppingCartModule = angular.module("shoppingCart",
[])
        shoppingCartModule.controller("ShoppingCartController", function ($scope) {
            $scope.items = [
                  {
                      product_name: "HP Pavilion 15-ab216TX Notebook",
                      price: 48500
                  },
                  {
                      product_name: "HP 15-AC116TX Laptop",
                      price: 36299
                  },
                  {
                      product_name: "HP 15-AC119TX Laptop",
                      price: 39799
                  },
                  {
                      product_name: "HP 15-ac118tu Notebook",
                      price: 18999
                  },
                   {
                       product_name: "HP 15-AF114AU Notebook",
                       price: 25489
                   },
            ];
            $scope.remove = function (index) {
                $scope.items.splice(index, 1);
            }
        });
        var namesModule = angular.module("namesList", [])
        namesModule.controller("NamesController", function ($scope) {
            $scope.Name = "Aditya Kumar";
            $scope.Email = "adityasingh06630@@gmail.com";
            $scope.mobile_no = "8953249451";
        });
       
angular.bootstrap(document.getElementById("App2"), ['namesList']);
    </script>
</body>
 
</html>

Output:


MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy