Question

我添加了模块和控制器，但它没有工作。请指出我的错误，以便删除它们。

var app=angular.module("hello",[]);
app.controller("func",function()
{
    this.products=gems;
});
var gems=[
    name:Azhar,
    gpa:2.8,
    institute:UCP
    ];

**html code**

//html code of what I have done so far.

<script src="angular.min.js"></script>
<script src="world.js"></script>
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />

<html>
<body ng-app="hello">
<div ng-controller="func">

    {{products.name}};


</div>


</body>

</html>

Answer 1

我已更正您的代码：

<强> HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="angular.min.js"></script>
    <script src="world.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="hello">
<div ng-controller="func">
    {{products.name}}
</div>
</body>
</html>

<强>的JavaScript

var app = angular.module("hello", []);
app.controller("func", ['$scope', function ($scope) {

    var gems = {
        name: 'Azhar',
        gpa: 2.8,
        institute: 'UCP'
    };

    $scope.products = gems;
}]);

Answer 2

您需要解决一些问题：

将gems从Array更改为Object
设置$scope.products而不是this.products
仅在gems定义后才$scope.products
使用引号

gems

这是修复后的一个工作示例：

＆＃13;

var gems = {
  name:'Azhar',
  gpa:2.8,
  institute:'UCP'
};
var app=angular.module("hello",[]);
app.controller("func", function($scope){
  $scope.products=gems;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="hello">
  <div ng-controller="func">
    {{products.name}};
  </div>
</div>

＆＃13;

Answer 3

尝试在控制器中使用Scope变量。

var app=angular.module("hello",[]);
app.controller("func",function($scope)
{
    $scope.products=gems;
});

此外，您没有正确使用数组变量。

添加ng-repeat以访问数组元素。

<div ng-controller="func">
    <div ng-repeat="product in products">
        {{product.name}};
    </div
</div>

这应该对你有用

修改

根据AngularJS文件：

当Controller通过ng-controller附加到DOM时指令，Angular将使用。实例化new Controller object 指定Controller的构造函数。一个新的孩子scope将是创建并作为注入参数提供给 Controller's constructor的功能为$scope。

有关详细信息，请参阅AngularJS controller documentation.

Answer 4

我发现您的代码存在许多问题。我建议你在angularjs上关注good tutorial。

您根本没有使用$ scope

您可以将$ scope视为与当前控制器和HTML视图共享的公共对象。它在$ scope中的所有内容都可以在＆＃34;双重绑定＆＃34;中进行操作。控制器和HTML之间的方式（可以从两种方式进行编辑）。

例如，这是您的代码：

app.controller("func",function()
{
    this.products = gems; //don't do this, you html will don't ever know what "products" is.
});

应替换为：

app.controller("func",function($scope)
{
    $scope.products = [{name:Azhar,gpa:2.8,institute:UCP}]; //note the $scope sintax, and the correct way to initialize an array of objects ({}).
});

您没有在HTML

中正确使用数组

如果＆＃34;产品＆＃34;它是一个数组，然后{{products.name}};不会简单地工作，因为数组需要一个索引来处理。例如，{{products[0].name}};将为您提供数组中第一个元素的名称。

<强>但是

通过使用ng-repeat，Angularjs为您提供了一种更好的方法来处理数组。例如：

<div ng-repeat="product in products track by $index">
   {{product.name}}
</div>

将迭代您的数组并显示其中所有产品的名称。

Answer 5

您需要对head进行一些更改并使用controllerAs，如下所示：

<html>
  <head>
    <script src="angular.min.js"></script>
    <script src="world.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
  </head>

<body ng-app="hello">
  <div ng-controller="func as prod">
    {{prod.products.name}};
  </div>
</body>

</html>

angularjs在我的代码中不起作用

5 个答案:

您根本没有使用$ scope

您没有在HTML