AngularJS значение области не отображается в представлениях

Я новичок в angularjs; значение области не отображается в представлениях.AngularJS значение области не отображается в представлениях

У меня есть два приложения: myApp и ram - каждый имеет свои контроллеры.

Я пытаюсь отобразить значения области. Только myApp показывает значения, но нет.

<div ng-app="myApp" ng-controller="myCtrl"> 

    First Name: <input type="text" ng-model="firstName"><br> 
    Last Name: <input type="text" ng-model="lastName"><br> 
    <br> 
    Full Name: {{firstName + " " + lastName}} 

</div> 

<div ng-app="ram" ng-controller="myCtrl2"> 

    First Name: <input type="text" ng-model="firstName2"><br> 
    Last Name: <input type="text" ng-model="lastName2"><br> 
    <br> 
    Full Name: {{firstName2 + " " + lastName2}} 

</div> 

<script> 
    var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope) { 
    $scope.firstName= "John"; 
    $scope.lastName= "Doe"; 
    }); 

</script> 

<script> 
    var app2 = angular.module('ram', []); 
    app2.controller('myCtrl2', function($scope) { 
    $scope.firstName2= "ram"; 
    $scope.lastName2= "babu"; 
    }); 
</script>

источник

2016-01-13 rtxing

У вас не может быть двух ng-приложений на одной странице. Если вы хотите это сделать, вместо этого используйте angular.bootstrap. – pixelbits

Вам нужно загрузите модули, чтобы иметь несколько ng-приложений на странице. –

Я понял. Спасибо. – rtxing

Вам необходимо перезагрузить модули, чтобы иметь несколько ng-приложений на вашей странице.

<html> 
<head> 
    <script src="angular.min.js"></script> 
</head> 
<body> 
    <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController"> 
     <h1>Your order</h1> 
     <div ng-repeat="item in items"> 
      <span>{{item.product_name}}</span> 
      <span>{{item.price | currency}}</span> 
      <button ng-click="remove($index);">Remove</button> 
     </div> 
    </div> 

    <div id="App2" ng-app="namesList" ng-controller="NamesController"> 
     <h1>List of Names</h1> 
     <div ng-repeat="_name in names"> 
      <p>{{_name.username}}</p> 
     </div> 
    </div> 
    <script> 
      var shoppingCartModule = angular.module("shoppingCart", []) 
      shoppingCartModule.controller("ShoppingCartController", 
       function($scope) { 
        $scope.items = [ 
         {product_name: "Product 1", price: 50}, 
         {product_name: "Product 2", price: 20}, 
         {product_name: "Product 3", price: 180} 
        ]; 
        $scope.remove = function(index) { 
         $scope.items.splice(index, 1); 
        } 
       } 
      ); 
      var namesModule = angular.module("namesList", []) 
      namesModule.controller("NamesController", 
       function($scope) { 
        $scope.names = [ 
         {username: "Nitin"}, 
         {username: "Mukesh"} 
        ]; 
       } 
      ); 
      angular.bootstrap(document.getElementById("App2"),['namesList']); 
    </script> 
</body> 
</html>

источник

2016-01-13 11:54:44

Вы не можете использовать два приложения на одной странице. Если вы это сделаете, вам понадобится использовать Angular Bootstrap.

Сначала назначьте свой второй DIV идентификатор ID = например "ramID" к чему-то, как показано ниже

<div id="ramID" ng-app="ram" ng-controller="myCtrl2">

затем добавить эту строку в ваш код в ваш скрипт

angular.bootstrap(document.getElementById("ramID"),['ram']);

надеюсь, что это помогает.

источник

2016-01-13 12:04:50

AngularJS значение области не отображается в представлениях

ответ

Смежные вопросы