Question

使用AngularJS，我需要创建一个循环遍历数组并显示相关信息的指令：

到目前为止，这是我的代码，但出于某种原因，它现在正在运行。请帮助。显示的内容是下面的文本为纯文本。显然，图像也没有被加载。

info.title
info.developer
info.price |货币

以下是使用的文件。

appInfo.html - 指令用于每个元素的模板

<img class="icon" ng-src="{{ info.icon }}"> 
<h2 class="title">{{ info.title }}</h2> 
<p class="developer">{{ info.developer }}</p> 
<p class="price">{{ info.price | currency }}</p>

appInfo.js - 指令

app.directive('appInfo', function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    templateUrl: 'appInfo.html' 
  }; 
});

app.js - 模块

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

控制器 - 重复测试元素

app.controller('MainController', ['$scope', function($scope) {
  $scope.apps =
    [ 
  { 
    icon: 'img/move.jpg', 
    title: 'MOVE', 
    developer: 'MOVE, Inc.', 
    price: 0.99 
  }, 
  { 
    icon: 'img/shutterbugg.jpg', 
    title: 'Shutterbugg', 
    developer: 'Chico Dusty', 
    price: 2.99 
  },
    { 
    icon: 'img/move.jpg', 
    title: 'MOVE', 
    developer: 'MOVE, Inc.', 
    price: 0.99 
  }, 
  { 
    icon: 'img/shutterbugg.jpg', 
    title: 'Shutterbugg', 
    developer: 'Chico Dusty', 
    price: 2.99 
  } 
];
}]);

的index.html

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the AngularJS library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  </head>
  <body ng-app="AppMarketApp">
    <div class="header">
      <div class="container">
        <h1>App Market</h1>
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">          

        <div class="card" ng-repeat="a in apps"> 
  <app-info info="{{a}}"></app-info>
        </div>   

      </div>
    </div>

    <!-- Modules -->
    <script src="app.js"></script>

    <!-- Controllers -->
    <script src="MainController.js"></script>

    <!-- Directives -->
    <script src="appInfo.js"></script>

  </body>
</html>

提前致谢。

Answer 1

你应该做

<div class="card" ng-repeat="a in apps"> 
  <app-info info="a"></app-info>
        </div>

已经期望表达式的属性不需要花括号。

AngularJS指令循环遍历数组

1 个答案: