2016-03-21 5 views
0

私は項目のリストを出力する指令を書いています。これらの項目は、JSONのどこかから読み込むことを意図しています。関数を呼び出して、 `ng-repeat`指示文で項目をレンダリングする方法はありますか?

ここで、それぞれの項目を指示に渡すメソッドに応じてレンダリングしたいと思います。次に、私のテンプレートでは、メソッドを呼び出し、レンダリングするアイテムを渡します。

メソッド自体が呼び出されますが、渡される項目はundefinedです。

どこが間違っていて、これを達成する方法はありますか?あなたが見ると、ここでのコードで遊ぶことができます

https://jsfiddle.net/zpntqayr/

ここでは、コードは次のとおりです。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Angular</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.js"></script> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
     <drop-down-list items="data" display-item="itemToString(item)" /> 
    </div> 
    <script> 

    var myApp = angular.module("myApp", []); 

    myApp.controller("myCtrl", function ($scope, $http) { 
     $scope.data = [{ "Name": "Value 1", "Value": 1 }, { "Name": "Value 2", "Value": 2 }, { "Name": "Value 3", "Value": 3 }, ] ; 
     $scope.itemToString = function (item) { 
      // alert(item); 
      return item.Name; 
     }; 
    }); 

    myApp.directive('dropDownList', function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      scope: { 
       items: '=', 
       displayItem: '&' 
      }, 
      template: '<ul><li ng-repeat="item in items">{{displayItem(item)}}</li></ul>', 
     }; 
    }); 

    </script> 
</body> 
</html> 

答えて

3

同じように以下のディレクティブのテンプレートにコードを置き換える:

{{displayItem(item)}} 

{{displayItem({item: item})}} 
+0

偉大な、ありがとう、それは働いている!両方の構文の違いは何ですか? – remio

関連する問題