Question

我正在完成一个角度教程，我在实际页面上有这个输出： {{product.name}} $ {{product.price}}

我的html和js在

之下

<!DOCTYPE html>
<html ng-app="gemStore">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div class="product row" ng-repeat='product in store.products'>
    <h3>
        {{product.name}}
        <em class="pull-right">${{product.price}}</em>
    </h3>
</div>
</body>
</html>

然后是js

(function() {
  var app = angular.module('gemStore', ['bootstrap-tagsinput']);

  app.controller('StoreController', function(){
    this.products= gems;
  });

  var gems = [
    { name: 'Azurite', price: 2.95 },
    { name: 'Bloodstone', price: 5.95 },
    { name: 'Zircon', price: 3.95 },
  ];
})();

有关如何实际显示product.name内容的任何帮助将不胜感激。另外为什么html不能识别这些大括号{{}}并为它们显示java脚本？

Answer 1

这一行错了：

var app = angular.module('bootstrap-tagsinput', 'gemStore', []);

你只能拥有一个主模块，你的主应用程序是gemStore所以应该是这样的：

var app = angular.module('gemStore', ...

Answer 2

<div ng-app='gemStore'>
<div class="container" ng-controller="StoreController as store">
<div class="product row">
    <h3 ng-repeat="product in products">
        {{product.name}}
        <em class="pull-right">${{product.price}}</em>
    </h3>
</div>
</div>
</div>

您的角度控制器文件，

var app = angular.module('gemStore', []);

  app.controller('StoreController', function($scope){

     // var gems = [
    $scope.products=[  
    { name: 'Azurite', price: 2.95 },
    { name: 'Bloodstone', price: 5.95 },
    { name: 'Zircon', price: 3.95 },
  ];

  });

想要测试此代码？请使用这个为你制作的小提琴， http://jsfiddle.net/xfeh06zg/

Answer 3

您没有名为product的范围。您必须在scope中定义产品controller 见jsfiddle

查看

<div ng-app="gemStore">
  <div class="container" ng-controller="StoreController as store">
    <div class="product row" ng-repeat="product in store.products">
      <h3>
        {{product.name}}
        <em class="pull-right">${{product.price}}</em>
      </h3>
 </div>

<强>控制器

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function(){
    this.products = gems;
  });

  var gems = [
    { name: 'Azurite', price: 110.50 },
    { name: 'Bloodstone', price: 22.90 },
    { name: 'Zircon', price: 1100 },
  ];
})();

Answer 4

我认为问题是我没有正确的脚本src这里应该是第一个链接和脚本标记：

`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>`

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>

Angularjs无法识别{{}}

4 个答案: