watch() function not working angular.js on json call

Question

I want to execute a method when my $http.selectedSong (model value) changes , but I can't seem to let it work anny ideas how this comes? :

app.controller('songController', ['$http', function($http) {

    $songs = this;
    $songs.tracks = [];

    $http({
            url: "http://api.q-music.be/1.2/tracks/plays?limit=20",
            dataType: "jsonp",
            jsonp: "callback"
        })
        .success(function(lastSongsList) {

            $http.$watch('selectedSong', function (newVal, oldVal) {
                 if (newVal !== oldVal) {
                    alert('hej');
                 }
            });
        });

}]);

My goal is to work with data i achieved from this html code :

<select ng-model="selectedSong"  ng-init="selectedSong === songs.tracks[0].title" ng-options="song as song.title for song in songs.tracks"></select>

I want to see when the value I select in 'select' changes so i can work with this value to do methods etc ...

What are you trying to accomplish here? You aren't actually changing selectedSong. And $http doesn't have a $watch function. I suspect you want to do something when the HTTP request comes back? Then the success callback is all you need. — Nate Barbettini
– Nate Barbettini, Commented Feb 5, 2015 at 13:33

Josh · Accepted Answer · 2015-02-05 14:22:33Z

1

$watch is a construct that is unique to the $scope service.

I'm assuming you are using the controller as syntax in which case you are not directly using $scope within your controller. You can however, set up an ng-change directive to execute arbitrary code whenever a bound model changes.

<select ng-model="ctrl.selectedSong" ng-change="ctrl.doStuff()">

This is ultimately a cleaner option than using a $watch

Here is a working snippet based on your example above

(function() {
  'use strict';

  function InputController() {
    var vm = this;
    vm.songs = ['Uptown Funk!', 'Thinking Out Loud','Take Me To Church','Blank Space'];
    vm.selectedSong = vm.songs[0];

    vm.onSongChange = function() {
      alert(vm.selectedSong);
    };
  }

  angular.module('inputs', [])
    .controller('InputCtrl', InputController);

}());

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<div class="container" ng-app="inputs" ng-controller="InputCtrl as ctrl">
  <div class="row">
    <div class="col-xs-6">
      <h3>Primary</h3>
      <select class="form-control" ng-model="ctrl.selectedSong" ng-options="song for song in ctrl.songs" ng-change="ctrl.onSongChange()"></select>
    </div>
  </div>
</div>

edited Feb 5, 2015 at 14:22

answered Feb 5, 2015 at 13:35

Josh

45k7 gold badges106 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jim Peeters Over a year ago

I think this ng-change thing is what i am looking for

Jim Peeters Over a year ago

so 'ctrl' is the name of the controller and 'doStuff() is a method defined in this controller?

Josh Over a year ago

@JimPeeters - I had assumed you were using the controller as syntax given your code snippet above was using this to bind properties to. If that's the case, then it is simply the alias you use when setting up your controller binding either via a directive ng-controller="foo as ctrl" or in your route, {controller: 'foo', controllerAs: 'ctrl'} If you are not using controller as then simply disregard this

Jim Peeters Over a year ago

i still have a question i know have in my html this : : <select ng-model="selectedSong" ng-change="songs.change()" ng-options="song as song.title for song in songs.tracks"></select>

Jim Peeters Over a year ago

and in my javascript this : app.controller('songController', ['$http', function($http) { $songs = this; $songs.tracks = []; $http({ url: "api.q-music.be/1.2/tracks/plays?limit=20", dataType: "jsonp", jsonp: "callback" }) .success(function(lastSongsList) { $songs.tracks = lastSongsList.played_tracks; console.log($songs.tracks); }); function change(){ alert('test'); } }]);

|

Narek Mamikonyan · Accepted Answer · 2015-02-05 13:33:04Z

0

you catn watch $http it service not $scope

you can only watch $scope property

here is a link to documentation

answered Feb 5, 2015 at 13:33

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

watch() function not working angular.js on json call

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related