logo标签列表

AngularJS指令用于循环遍历数组

javascriptangularjs
3
使用AngularJS，我需要创建一个指令来循环遍历数组并显示相关信息：
以下是我的代码，但由于某些原因它现在无法工作。请帮忙检查一下。当前只会以纯文本形式显示下面的文本。显然，图片也没有加载。
info.title info.developer info.price | currency
以下是所使用的文件。
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 - directive

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

app.js - module

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>

事先感谢您。

ng-repeat指令有什么问题吗？ - Josh Harrison
1个回答
4

您应该这样做

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接