0

I have an angular model which gets the data through a JSON call and shows as follows. After making a second JSON how can I refresh this list.

     <ul ng-repeat="x in names">
            <a href="{{x.webLink}}"><h3> {{ x.name  }} </h3></a>
        <h4> {{ x.place }} </h4>
      <p> <img ng-src="{{x.image}}"> </p> 
   </ul>

I inject the data initially through this:

 $http.get("").success(function (response) {$scope.names = courseParsed;});

You can check it out below. http://findcourse.parseapp.com/

I am adding the full code to make it easier, through the "Select and Search" Button ($scope.names[0].name = "test"; $scope.names.splice(1, 1)), I am trying to modify the list, even though it worked once, now it is not working at all.

var app = angular.module('myApp', []);
var  queryParam ={};

app.controller('customersCtrl', function($scope, $http, $q) {

  Parse.$ = jQuery;
   Parse.initialize("mvLeLP1wbRJW24ESjaUEgPueWHpMLNZNvwLnTTJW",  //"applicationId":
                   "NqwHrO9MjC9uLgqu4zNIi6u9TC19GVRbMmNxXTag");  //JavaScript Key

   var Article = Parse.Object.extend('coursesParse');

     $scope.master = {};
      $scope.update = function(user) {
        //$scope.master = angular.copy(user);
        //alert(user.degree+" "+user.industry);
         //alert($scope.names[0].name);
         $scope.names[0].name = "test";
         $scope.names.splice(1, 1);
      };

      var myLat = -37.875773;
      var myLng = 145.087829;
      if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(getPosition);
           } else {
                    alert("Please allow using your location to see the courses around you!");
      }
      function getPosition(position) {
                      myLat = position.coords.latitude;
                      myLng = position.coords.longitude; 
                    var mapOptions = {
                     center: new google.maps.LatLng(myLat, myLng),
                     zoom: 12,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                     }
                       map = new google.maps.Map(document.getElementById('map'), mapOptions);
      }

         var ArticleDfd = $q.defer();
         var queryInitial = new Parse.Query(Article);
         //queryInitial.equalTo('name', 'Electrical Supply');
          var geoPoint = ({latitude: myLat, longitude: myLng});
          queryInitial.near("coords", geoPoint);
          queryInitial.limit(4);

        queryInitial.find().then(function (data) {
           var courseParsed = [];
           for (var i = 0; i < data.length; i++) {
               courseParsed[i] = {
                 "name": data[i].get('name'), 
                 "description": data[i].get('description'), 
                 "length": data[i].get('length'), 
                 "place": data[i].get('place'), 
                 "comment": data[i].get('comments'), 
                 "image": data[i].get('images'),
                 "webLink": data[i].get('weblink'),
                 "xCor": data[i].get('coords').latitude,
                 "yCor": data[i].get('coords').longitude
                };
              //for (var prop in courseParsed[i]) {alert(prop + " = "+ courseParsed[i][prop])};
            }
                      for(var i=0;i<courseParsed.length;i++){
                        //alert(courseParsed[i]['xCor'], courseParsed[i]['yCor']);
                        //alert(courseParsed[i]['xCor']);
                       var marker = new google.maps.Marker({
                         position: new google.maps.LatLng(courseParsed[i]['xCor'], courseParsed[i]['yCor']),
                         //icon: "img/icon.png",
                         map: map,
                         title: 'Hello World!'
                       });
                      }
              ArticleDfd.resolve(data);
              $http.get("").success(function (response) {$scope.names = courseParsed;});

           }, function (error) {
            ArticleDfd.reject(data);
        });
        ArticleDfd.promise
        .then(function (article) {
         $scope.currentArticle = article;
        })
       .catch(function (error) {
            //do something with the error
       });

});

HTML page:

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/effect.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="css/app.css">
<body>


<div ng-app="myApp" ng-controller="customersCtrl">

  <div id="map">Loading...</div>

  <div id="searchForm" ng-controller="customersCtrl">
    <form novalidate>
        <select type="text" ng-model="user.degree">
            <option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
        </select>
        <select type="text" ng-model="user.industry">
            <option>Finance</option><option>Construction</option><option>Energy and Power</option>
        </select>
        <!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
          <input type="radio" ng-model="user.gender" value="female" />female<br />
          <input type="button" ng-click="reset()" value="Reset" /> 
           <pre>user = {{user | json}}</pre>
            <pre>master = {{master | json}}</pre>-->
      <input type="submit" ng-click="update(user)" value="Select and Search" />
    </form>
  </div>

     <ul ng-repeat="x in names">
            <a href="{{x.webLink}}"><h3> {{ x.name  }} </h3></a>
        <h4> {{ x.place }} </h4>
      <p> <img ng-src="{{x.image}}"> </p> 
   </ul>

        <!--<p> {{ x.length + ', ' + x.description }} 
            <p> {{ x.comment }} </p> </p> -->


</div>

</body>
</html>
2
  • I dont get it. Simply updating the value of $scope.names won't work? Commented Oct 26, 2015 at 7:26
  • I can't see enough code to determine your problem but you can try $scope.$apply(); after the update to $scope.names. The ng-repeat should update automatically but if you are doing the update out of cycle you might need to prompt a digest. Commented Oct 26, 2015 at 7:51

3 Answers 3

1

All you have to do is to move your ul inside the div above.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/effect.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="css/app.css">
<body>


<div ng-app="myApp" ng-controller="customersCtrl">

  <div id="map">Loading...</div>

  <div id="searchForm" ng-controller="customersCtrl">
    <form novalidate>
        <select type="text" ng-model="user.degree">
            <option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
        </select>
        <select type="text" ng-model="user.industry">
            <option>Finance</option><option>Construction</option><option>Energy and Power</option>
        </select>
        <!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
          <input type="radio" ng-model="user.gender" value="female" />female<br />
          <input type="button" ng-click="reset()" value="Reset" /> 
           <pre>user = {{user | json}}</pre>
            <pre>master = {{master | json}}</pre>-->
      <input type="submit" ng-click="update(user)" value="Select and Search" />
    </form>

     <ul ng-repeat="x in names">
            <a href="{{x.webLink}}"><h3> {{ x.name  }} </h3></a>
        <h4> {{ x.place }} </h4>
      <p> <img ng-src="{{x.image}}"> </p> 
   </ul>

  </div>

</div>

</body>
</html>
Sign up to request clarification or add additional context in comments.

Comments

0

after calling second JSON. assign result to 'names' variable. then use following code

$route.reload();

Comments

0

I think you need to place your $http call in $scope.getData function & call it again whenever you wanted to reload data. ng-repeat will do the magic for you of refreshing data as any change occurred in names object. Basically any change in names will render those many ul's on view.

2 Comments

How can I do this Pankaj, specially if the number of new data is not the same as previous?
@Amir you dont need to worry about it..ng-repeat will handle that part..what your exact case?

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.