Calling function inside of a controller when dropdown changes

Question

I have the following code inside of my Angular.JS controller file:

JBenchApp.controller('CaseListCtrl', ['$scope', '$http', 
  function ($scope, $http) {
      // Case list stuff here
          $http.get('http://10.34.34.46/BenchViewServices/api/Calendar/LA/5/08-27-2015').success(function (response) {
              $scope.cases = response;
          });

          $http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/LA').success(function (response) {
              $scope.departments = response;
          });
  }]);

The cases variable contains a list of events for the selected courtroom (department). What I want is to change this so that I can refresh the cases when things change in the UI. For instance, the departments are part of a dropdown list and when I change departments i want to change the cases variable to contain the events for the newly selected courtroom (department). In addition, I have a date picker and when it changes, I want the cases variable to contain the vents for the newly selected date for the currently selected courtroom (department).

EDIT STARTS HERE: I understand that I can use ng-change to bind to a $scope function like this:

JBenchApp.controller('CaseListCtrl', ['$scope', '$http', 
  function ($scope, $http) {
      // Case list stuff here
      $scope.getCalendar = function () {
          $http.get('http://10.34.34.46/BenchViewServices/api/Calendar/LA/5/08-27-2015').success(function (response) {
              $scope.cases = response;
          });
      }

          $http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/LA').success(function (response) {
              $scope.departments = response;
          });
  }]);

However, I also understand I require an ng-model in order to use ng-change. That then brings up two questions:

How do I set up a model off the departments since they are also loaded dynamically? I have it set currently to $scope.departments...is that correct?
How do I do the initial load of the calendar stuff as the calendar screen loads?

You can bind a scope method to ng-change on the dropdown provided it has an ng-model. — PSL, Aug 31 '15 at 17:55
Here's an example fiddle of ng-change on a select in action: http://jsfiddle.net/nm6h1re4/ — Jimmy, Aug 31 '15 at 18:02
http://stackoverflow.com/questions/24253933/call-controller-function-from-select-angularjs — PSL, Aug 31 '15 at 18:05
@james Can you explain to me how your model "item" is seen inside the controller? — Michael Mahony, Aug 31 '15 at 20:29
When a value is selected in the select/dropdown, item gets updated to the value (in this case, an object with code and name). The ngModel directive binds the selected value to the current scope (see https://docs.angularjs.org/api/ng/directive/ngModel). — Jimmy, Aug 31 '15 at 20:43

score 0 · Answer 1 · answered Aug 31 '15 at 17:59

0

you make a ng-change in your dropdown, like this:

<select ng-change="updateCase()">

then you can make a function in your controller:

$scope.updateCase = function(){
    var filter = //your logic...
     $scope.cases = filter;
}

answered Aug 31 '15 at 17:59

Shimon Brandsdorfer

1,673
9
23

score 0 · Answer 2 · answered Aug 31 '15 at 17:59

0

You can make it with ng-change, or you can use $watch in the controller.

answered Aug 31 '15 at 17:59

qzenchik

46
3

score 0 · Answer 3 · answered Aug 31 '15 at 18:00

0

You can use ng-change directive

Something like

<input ng-model = 'someModel' ng-change = 'someChangeFunction()' />

Now, in your controller, you can have something like this -

$scope.someChangeFunction = function()
{
   //code to change cases model data
}

You should change AngularJS documentation - ngChange

answered Aug 31 '15 at 18:00

Vishwajeet Vatharkar

1,146
4
18
42

How do i set up the model against the departments that are grabbed dynamically from my database? The example given above (for an answer) has the values hard-coded. – Michael Mahony Aug 31 '15 at 18:15

Calling function inside of a controller when dropdown changes

3 Answers3