2

$scope に製品のリストがあります。私の製品は次のようになります。

function myController($scope) {
  $scope.products = [
    { id:1, name:"hamburger", image:"/img/hamburger.png" },
    { id:2, name:"fries", image:"/img/fries.png" },
    { id:3, name:"hot dog", image:"/img/hotDog.png" }
    ...
  ];
}

food.html というファイルがあります。そのファイルは次のようになります。

<div>
  <div>{{name}}</div>
  <div><img ng-src="{{image}}" /></div>
</div>

リピーター経由で index.html の food.html でレンダリングされたすべての製品のリストを表示しようとしています。それ、どうやったら出来るの？現在、私は次のようなものを持っています：

<div ng-controller="myController">
  <div>Total Food Items: {{products.length}}</div>
  <div ng-repeat="product in products">
  </div>
</div>

food.html を使用して各製品をレンダリングする方法に行き詰まっています。どうすればいいですか？ありがとうございました！

4

2 に答える 2

4

テンプレートとして food.html を使用する場合は、ディレクティブを作成します。

angular.module('MyApp').directive('foodDetail', function() {
return {
    restrict: 'A',
    template: '<div> <div>{{product.name}}</div> <div><img ng-src="{{product.image}}" /></div></div>',

    }
});

そして index.html は 

<div ng-controller="myController">
    <div>Total Food Items: {{products.length}}</div>
    <div ng-repeat="product in products">
    <div food-detail></div>
    </div>
</div>
于 2013-10-18T14:32:06.807 に答える
0

index.html:

<html ng-app="myApp">
    <!-- ... some code ... -->
    <div data-ng-view></div>
    <!-- ... some more code ... -->
</div>

Food.html:

<div>Total Food Items: {{products.length}}</div>
<div ng-repeat="product in products">
    <div>{{name}}</div>
    <div><img ng-src="{{image}}" /></div>
</div>

次に、app.js で次のようにルートを構成します。

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/food', {
        templateUrl: 'food.html',
        controller: 'myController'
    })
});

詳細については、次のリソースを参照してください: http://docs.angularjs.org/tutorial/step_07

于 2013-10-18T14:07:23.267 に答える