使用angularjs的“在控制器中存储数据”应用程序_Angularjs

使用angularjs的“在控制器中存储数据”应用程序

angularjs

使用angularjs的“在控制器中存储数据”应用程序,angularjs,Angularjs,我是Angularjs的初学者。我正在通过看视频练习。我试过一个程序 <!doctype html> <html ng-app="store"> <head> <meta charset="UTF-8"> <title>Example</title> </head> <body > <div ng-Controller="StoreController as store"&g

我是Angularjs的初学者。我正在通过看视频练习。我试过一个程序

<!doctype html>
<html ng-app="store">
<head>
  <meta charset="UTF-8">
  <title>Example</title>

 </head>
<body >
    <div ng-Controller="StoreController as store">
        <h1>{{store.product.name}}</h1>
        <h2>{{store.product.price}}</h2>
        <p>{{store.product.lastname}}</p>
    </div>
  <script type="javascript" src="lib/angular.min.js"></script>
  <script src="lib/app.js" type="javascript"></script>

</body>
</html>

另存为app.js

但它并没有显示数据，只是显示

{{store.product.name}}
{{store.product.price}}
{{store.product.lastname}}

检查控制台日志中的错误。我至少看到一个错误，gem变量丢失了，因为以后会调用控制器。在控制器内声明gem

(function () {
    var app = angular.module('store', []);
    app.controller('StoreController', function () {
        var gem = {
            name: 'Deco',
            price: 2.5,
            lastname: 'ANIL KUMAR',
        }
        this.product = gem;
    });
})();

您必须将变量'gym'声明为控制器内的范围变量。请检查一下这把小提琴

谢谢你们两位。两个代码都正确。经过每一步的调试，我终于发现了错误

<div ng-Controller="StoreController as store">
        <input type="text" ng-model="name"></input> 
        <h1>{{store.product.name}}</h1>
        <h2>{{store.product.price}}</h2>
        <p>{{store.product.lastname}}</p>
    </div>
  <script src="lib/angular.min.js"></script>
  <script src="lib/app.js"></script>
 &

(function(){
 var app= angular.module('store',[]);
app.controller('StoreController', function()
    {this.product = gem;}
    );
var gem = {
    name : 'Deco',
    price : 2.5,
    lastname : 'ANIL KUMAR',
}
})();

这正在起作用。

我尝试了上述方法，但结果相同。请建议要调试的内容。请参阅浏览器开发人员控制台F12中记录的错误。

var store = angular.module('myApp',[]);

store.controller('StoreController', ['$scope', function (scope) {
    scope.gym = {
        name: 'Deco',
            price: 2.5,
            lastname: 'ANIL KUMAR'}
        }]);


<div ng-app="myApp" ng-Controller="StoreController">
        <h1>{{gym.name}}</h1>
        <h2>{{gym.price}}</h2>
        <p>{{gym.lastname}}</p>
    </div>

<div ng-Controller="StoreController as store">
        <input type="text" ng-model="name"></input> 
        <h1>{{store.product.name}}</h1>
        <h2>{{store.product.price}}</h2>
        <p>{{store.product.lastname}}</p>
    </div>
  <script src="lib/angular.min.js"></script>
  <script src="lib/app.js"></script>
 &

(function(){
 var app= angular.module('store',[]);
app.controller('StoreController', function()
    {this.product = gem;}
    );
var gem = {
    name : 'Deco',
    price : 2.5,
    lastname : 'ANIL KUMAR',
}
})();