current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

well im very new angular and i know this may be a very basic question but ,i've been trying for a long time and ive come to nothing . i just want to create data in json format and then display the results using controllers and angular. heres what ive done so far :

        <body ng-app="guestTracker">
        <script>
            var guestTracker = angular.module('guestTracker',[]);
            guestTracker.controller('dataController',function($scope){
                    $scope.guests=[
                    { date:'1-6-2015', time:'3:00 am', rank:'b'}
                        ];
                        });

        </script>   

        <div  ng-controller="dataController">
        date : {{$scope.date}}

    </div>  

    </body>

the output is just "{{$scope.date}}" just as it is.Thanks in advance and i know its a noob question but it would really help a lot.

share|improve this question

4 Answers 4

up vote 1 down vote accepted

you are on the right track, but you do not have to select $scope, because everything in the view is already on the scope. Also you have not selected the guests or a specific member of the guests array. If you want to show the first want the code would be like this:

<body ng-app="guestTracker">
    <script>
        var guestTracker = angular.module('guestTracker',[]);
        guestTracker.controller('dataController',function($scope){
                $scope.guests=[
                { date:'1-6-2015', time:'3:00 am', rank:'b'}
                    ];
                    });

    </script>   

    <div  ng-controller="dataController">
    date : {{guests[0].date}}

</div>  

</body>
share|improve this answer
    
thank you so much :D and so if guests had more than one element in the array , lets like a set of three dates , times and ranks. we call reference a particular set by changing '[0]' right ? like {{guests[1].date}} etc right ? and coudl we achieve the same by using the directive ng-repeat ? –  Vaishak P Dinesh Jan 17 at 7:09
    
Indeed, You could achieve the same with ngrepeat if you want to make a list of every guest –  Ricconnect Jan 17 at 10:43
    
thank you so much once again :) –  Vaishak P Dinesh Jan 19 at 9:31
up vote 0 down vote

don't worry, we all have to start somewhere! When I first started using Angular, one trick that helped me was putting {{ 1+2 }} in just to confirm that Angular has been properly initialized (if it has, that will render to 3). So that's always a good place to start. That said, you're calling $scope.date when you need to be calling $scope.guests instead. Assuming you'll have multiple guests, you'll probably want to take advantage of the nifty ng-repeat loop (one of my first favorite Angular features) which will end up looking something like this:

<div  ng-controller="dataController">
        <div ng-repeat='guest in guests'>
            date : {{ guest.date }}
        </div>
    </div>
share|improve this answer
up vote 0 down vote 
Use this
 <body ng-app="guestTracker">
        <script>
            var guestTracker = angular.module('guestTracker',[]);
            guestTracker.controller('dataController',function($scope){
                    $scope.guests=[
                    { date:'1-6-2015', time:'3:00 am', rank:'b'}
                        ];
                        });

        </script>   

        <div  ng-controller="dataController">
        date : {{guests[0].date}}

    </div>  

    </body>

http://plnkr.co/edit/RCVexXqwcAD3JD3SwSaR?p=preview

share|improve this answer
up vote 0 down vote

You should can use something like this.

  var guestTracker = angular.module('guestTracker', []);
  guestTracker.controller('dataController', function($scope) {
    $scope.guests = [{
      date: '1-6-2015',
      time: '3:00 am',
      rank: 'b'
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="guestTracker">
  <div ng-controller="dataController">
    date : {{guests[0].date}}
  </div>
</body>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.