-2

JSON ファイルをループする必要があり、そのために AngularJS を使用しています。機能は次のとおりです。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        function PostsCtrlAjax($scope, $http) {
        $http({method: 'POST', url: 'posts.json'}).success(function(data) {
                $scope.tasks = data;
            });
        }
</script>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax"> 
        <div ng-repeat="task in tasks.objects">
<script type="text/javascript">     
var adviser1 = new primitives.orgdiagram.ItemConfig("{{task.name}}", "{{task.description}}", "http://www.basicprimitives.com/demo/images/photos/z.png");
</script>
</div>
</div>

次のコードを使用する{{task.name}}と、説明が {{task.name}} として出力されますが、その変数の内容を出力するにはどうすればよいですか? 引用符を使用していない場合は、何も表示されません。

どうすれば修正できますか？

4

1 に答える 1

0

コード設計を見直す必要があると思います。<script>の中にタグを付けるという考えは、ng-repeat私にはベストプラクティスとは思えません。

directive内に配置できるシンプルなものを作成できますng-repeat。new primitives.orgdiagram.ItemConfig()ディレクティブの 1 つがループによってインスタンス化されるたびに、必要なすべてのパラメーターを使用して関数を実行できます。

同様のものを作成しましたが、関数を呼び出す代わりに、コンソールに出力しています。

以下のコードまたはここでの実例をご覧ください ( http://plnkr.co/edit/1J2Ep6DbfUiFDkL6TUAv?p=preview )

 <!doctype html>
  <html lang="en" ng-app="myApp">
  <head>
   <meta charset="UTF-8">
    <title>Document</title>
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

      <script>

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

       myApp.controller('PostsCtrlAjax', ['$scope', '$http' ,function ($scope, $http) {

       $scope.tasks = {
        "data" :  [ 
         {
          name: 'Task 01',
          description: 'Task 01 Description',
          url: 'http://www.basicprimitives.com/demo/images/photos/z.png'
         },
        {
          name: 'Task 02',
          description: 'Task 02 Description',
          url: 'http://www.basicprimitives.com/demo/images/photos/z.png'
        }
      ]
    };
  }]);


  myApp.directive('adviser', [ '$compile', function ($compile) {
    return {
     restrict: 'A',
     transclude: true,
     replace: true,
      scope: {
       item : "="
      },
     link: function (scope, element, iAttrs) {

         var template = '<button ng-click="createAdviser(item.name, item.description, item.url)">{{item.name}}</button>';


         scope.createAdviser = function(name, description, url) {

         // var adviser1 =  new primitives.orgdiagram.ItemConfig(name, description, url);

            var adviser =  [name, description, url];

            console.log(adviser)

         }

         element.html(template).show();

         $compile(element.contents())(scope);

       }
     };
   }])

  </script>

  </head>
 <body>


 <div ng-controller="PostsCtrlAjax"> 
   <div ng-repeat="task in tasks.data">
     <div adviser item="task"></div>
  </div>
 </div>

 </body>
 </html>
于 2013-10-07T13:30:00.007 に答える