Angular: On button click to invoke controller

Question

I am new to Angular and have the following behaviour working at present:

• dropdown-section contains a button dropdown listing all competitions by name
• schedule-section contains content loaded from my controller that displays a full schedule of game information

I now need to implement the following behaviour:

• user selects a list item in the dropdown-section
• this list item then invokes a URL that will use the value in the ng-repeat to invoke the schedule-controller and return JSON information just for that competition
• the schedule-section will then be updated accordingly

I know I need to use an ng-click event, but I'm not sure how to pass in the value to the controller

I'm also not sure how to implement this for page load (where all competitions are loaded), compared to on button click which will load based on the competition selected

Any tips would be appreciated

<div id="dropdown-section" ng-controller="schedule-dropdown-controller">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Competition<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <div ng-repeat="(name, value) in dropdown.competitions">
                <li><a href="#">{{name}}</a></li>
            </div>
        </ul>
    </div>
</div>
<div id="schedule-section" ng-controller="schedule-controller">
    <div ng-repeat="(scheduleDay, scheduleFields) in schedule">
        <h5 class="schedule-date">{{scheduleDay}}</h5>
        <div ng-repeat="(scheduleField, scheduleEntries) in scheduleFields">
            <p class="schedule-field">{{scheduleField}}</p>
            <table class="schedule-table">
                <tr class="schedule-entry" ng-repeat="scheduleEntry in scheduleEntries">
                    <td class="schedule-info-small">{{scheduleEntry.timeOfGame}}</td>
                    <td class="schedule-info-small">{{scheduleEntry.competition}}:</td>
                    <td class="schedule-info-large">{{scheduleEntry.teamOne}}</td>
                    <td class="schedule-info-medium">{{scheduleEntry.score}}</td>
                    <td class="schedule-info-large">{{scheduleEntry.teamTwo}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

JavaScript

app.controller('schedule-controller', function($scope, $http) {
    $http.jsonp("http://www.myurl.com/abc")
        .success(function(response) {
            $scope.schedule = response;
        });
    }
);

Answer 1

You can achieve this by using angular's $broadcast and $on methods to dispatch and listen for an event.

First, update the markup of the selector to broadcast an event when selecting a schedule:

<li><a ng-click="updateSchedule(value)">{{name}}</a></li>

Second, in schedule-dropdown-controller inject $rootScope into your controller and add the updateSchedule method so the ng-click attribute works:

$scope.updateSchedule = function(value) {
    $rootScope.$broadcast('update-schedule', {value: value});  
}

Third, update schedule-controller to listen for the event, and trigger a schedule update:

app.controller('schedule-controller', function($scope, $http) {

    init();


    function init() {
        /**
         * Listens for the broadcast of the `update-schedule` event and reloads 
         * schedule data into the scope from an HTTP data source.
         */ 
        $scope.$on('update-schedule', function (events, args){
             loadSchedule(args.value);
        });

        /**
         * If you  need to load some initial schedule data, 
         * make a call to loadSchedule with your default value.
         */
        loadSchedule(someDefaultValue);

    }           

    function loadSchedule(value) {

        /**
         * Since I'm not sure what you need to do with value,
         * you'll need to update your HTTP method w/ value 
         * in the way you need to use it.
         */
        $http.jsonp("http://www.myurl.com/abc")
            .success(function(response) {
                $scope.schedule = response;
            });

    };

});

You can use the following references for learning more about broadcasting, emitting, and listening for events in angular.

• https://docs.angularjs.org/api/ng/type/$rootScope.Scope
• $on and $broadcast in angular