AngularJS的范围值不显示在视图

我是angularjs的新手;范围值不显示在视图中。AngularJS的范围值不显示在视图

我有两个应用程序：myApp和RAM - 每个人都有他们的控制器。

我试图显示范围值。只有myApp显示值，但ram不显示值。

<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-apps。如果你想这样做，请改用angular.bootstrap。 – pixelbits

你必须引导模块在页面中有多个ng-app。 –

我明白了。谢谢。 – rtxing

你必须引导模块在你的页面中有多个ng-app。

<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 e.g ID = “ramID” 喜欢的东西下面

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

那么这行添加到您的代码，脚本

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

希望它帮助。

来源

2016-01-13 12:04:50

AngularJS的范围值不显示在视图

回答

相关问题