-2

I have a need to loop through JSON file and I'm using AngularJS for that. The function is as follows:

<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>

By using the following code {{task.name}} and description are being printed as just {{task.name}}, how can I make it print out the content of that variable? And if I'm not using quotes, it doesn't show anything.

How can I fix that?

3
  • Why is a function\script tag inside a ng-repeat. Commented Oct 7, 2013 at 10:21
  • Okay so that's fixed, but the issue still holds Commented Oct 7, 2013 at 10:22
  • What's wrong with console.log? Commented Oct 7, 2013 at 14:50

1 Answer 1

0

I think you need to review your code design. The idea of having <script> tag inside a ng-repeat doesn't look best practice to me.

You could create simple directive that could be placed inside the ng-repeat. Every time one of the directives is instantiated by the loop you could run your function new primitives.orgdiagram.ItemConfig() with all the parameters you need.

I've created something similar but instead of calling your function, I am printing on the console.

Please take a look at the code below or working example here (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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.