2

I am trying to create a basic CRUD application using JayData, AngularJS and OData Web Api. I have got so far as creating a List view and an Edit view and when clicking on the Edit option for an item in the List view it successfully redirects to the Edit view and it is populated as expected. However, when I go back to the List view and select subsequent Edit options, the Edit view does not get populated. Here is my relevant Angular code :

EDIT : Here is my complete code, as requested :

app.js :

    var app = angular.module("app", ["localization", "ngResource", "ngRoute", "jaydata"]).
    config(function ($routeProvider, $locationProvider) {
        $routeProvider.
            when('/Admin/Fixtures/List', { controller: FixtureListController, templateUrl: '/Content/Templates/Fixtures.html' }).
            when('/Admin/Fixtures/Add', { controller: FixtureAddController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
            when('/Admin/Fixtures/Edit/:fixtureId', { controller: FixtureEditController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
            otherwise({ controller: TeamListController, redirectTo: 'Admin/Teams/List', templateUrl: '/Content/Templates/Teams.html' });
        $locationProvider.html5Mode(true); //will use html5 mode rather than hashbang where available
    });

var FixtureListController = function ($scope, $data) {

    $scope.fixtures = [];
    $scope.context = [];
    $scope.selectedFixture = null;

    $data.initService('http://lovelyjubbly.cloudapp.net/odata')
    .then(function (context) {
        $scope.context = context;
        $scope.fixtures = context.Fixtures.include('Stage').include('HomeTeam').
                                include('AwayTeam').include('City').toLiveArray();
    });

    $scope.delete = function () {

        //get id, can use this to get item from ng-repeat
        var emp = new lovelyjubblyWebApi.Models.Fixture({ FixtureId: this.fixture.FixtureId });

        $scope.context.Fixtures.remove(emp);
        $scope.context.saveChanges();
    };
};

//crud controllers
var FixtureAddController = function ($scope, $data) {

    $scope.fixtures = [];

    $data.initService('http://lovelyjubbly.cloudapp.net/odata')
    .then(function (context) {
        $scope.context = context;
        $scope.fixtures = context.Fixtures.toLiveArray();
        $scope.teams = context.Teams.toLiveArray();
        $scope.cities = context.Cities.toLiveArray();
        $scope.stages = context.Stages.toLiveArray();
    });

    $scope.save = function () {

        //prevents a separate post
        $scope.fixture.entityState = $data.EntityState.Modified;
        $scope.context.Fixtures.add($scope.fixture, true);
        $scope.context.saveChanges();

        //reset state
        $scope.context.stateManager.reset();
    };
};

var FixtureEditController = function ($scope, $data, $routeParams) {

    $scope.context = [];
    $scope.fixtures = [];
    $scope.teams = [];
    $scope.cities = [];
    $scope.stages = [];
    $scope.selectedFixture = null;
    $scope.fixture = null;


    $data.initService('http://lovelyjubbly.cloudapp.net/odata')
    .then(function (context) {
        $scope.context = context;
        $scope.fixtures = context.Fixtures.include('Stage').include('HomeTeam').
                                include('AwayTeam').include('City').toLiveArray();
        $scope.teams = context.Teams.toLiveArray();
        $scope.cities = context.Cities.toLiveArray();
        $scope.stages = context.Stages.toLiveArray();

        var emp = new lovelyjubblyWebApi.Models.Fixture({ FixtureId: $routeParams.fixtureId });

        $scope.context.Fixtures.filter('FixtureId', '==', $routeParams.fixtureId)
            .forEach(function (item) {
                emp.StageId = item.StageId;
                emp.CityId = item.CityId;
                emp.FixtureDate = item.FixtureDate;
                emp.HomeTeamId = item.HomeTeamId;
                emp.HomeTeamScore = item.HomeTeamScore;
                emp.AwayTeamId = item.AwayTeamId;
                emp.AwayTeamScore = item.AwayTeamScore;
            }).then(function (e)
            {
                $scope.fixture = emp;
            });

        $scope.save = function () {

            if ($scope.form.$valid) { //check for valid form

                var todo = $scope.context.Fixtures.attachOrGet({ FixtureId: $routeParams.fixtureId });
                todo.StageId = $scope.fixture.StageId;
                todo.CityId = $scope.fixture.CityId;
                //emp2.FixtureDate = $scope.fixture.FixtureDate;
                todo.FixtureDate = "10/10/2014 00:00";
                todo.HomeTeamId = $scope.fixture.HomeTeamId;
                todo.HomeTeamScore = $scope.fixture.HomeTeamScore;
                todo.AwayTeamId = $scope.fixture.AwayTeamId;
                todo.AwayTeamScore = $scope.fixture.AwayTeamScore;
                $scope.context.saveChanges();
            } else {
                alert("invalid form"); 
            }
        };
    });
};

List view:

<table class="table table-striped table-condensed table-hover">
    <thead>
        <th>
            Fixture Id
        </th>
        <th>
            Fixture Date
        </th>
        <th>
            Stage
        </th>
        <th>
            City
        </th>
        <th>
            Home Team
        </th>
        <th>
            Score
        </th>
        <th>
            Away Team
        </th>
        <th>
            Score
        </th>
    </thead>
    <tbody>
        <tr ng-repeat="fixture in fixtures | orderBy:'FixtureId'" id="fixture_{{fixture.FixtureId}}">
            <td>{{fixture.FixtureId}}</td>
            <td>{{fixture.FixtureDate}}</td>
            <td>{{fixture.Stage.StageName}}</td>
            <td>{{fixture.City.CityName}}</td>
            <td>{{fixture.HomeTeam.TeamName}}</td>
            <td>{{fixture.HomeTeamScore}}</td>
            <td>{{fixture.AwayTeam.TeamName}}</td>
            <td>{{fixture.AwayTeamScore}}</td>
            <td>
                <a href="/Admin/Fixtures/Edit/{{fixture.FixtureId}}"><i class="glyphicon glyphicon-edit"></i></a>
                <a ng-click="delete()"><i class="glyphicon glyphicon-remove"></i></a>
            </td>
        </tr>
    </tbody>
</table>

Add/Edit view :

<form name="form" class="col-xs-2" id="form" class="form-horizontal">
    <div class="control-group" ng-class="{error: form.StageName.$invalid}">
        <label class="control-label" for="StageName">Stage Team</label>
        <div class="controls">
            <select class="form-control" ng-model="fixture.StageId" ng-options="stage.StageId as stage.StageName for stage in stages" required>
                <option style="display:none" value="">Select</option>
            </select>
            <span ng-show="form.StageName.$dirty && form.StageName.$error.required">Stage required</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.CityName.$invalid}">
        <label class="control-label" for="CityName">City</label>
        <div class="controls">
            <select class="form-control" ng-model="fixture.CityId" ng-options="city.CityId as city.CityName for city in cities" required>
                <option style="display:none" value="">Select</option>
            </select>
            <span ng-show="form.CityName.$dirty && form.CityName.$error.required">City required</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.FixtureDate.$invalid}">
        <label class="control-label" for="BirthDate">Fixture Date</label>
        <div class="controls">
            <input type='text' class="form-control" ng-model="fixture.FixtureDate" name='FixtureDate' title="FixtureDate" />
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.HomeTeamName.$invalid}">
        <label class="control-label" for="HomeTeamName">Home Team</label>
        <div class="controls">
            <select class="form-control" ng-model="fixture.HomeTeamId" ng-options="team.TeamId as team.TeamName for team in teams" required>
                <option style="display:none" value="">Select</option>
            </select>
            <span ng-show="form.HomeTeamName.$dirty && form.HomeTeamName.$error.required">Home Team required</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.HomeTeamScore.$invalid}">
        <label class="control-label" for="HomeTeamScore">Home Team Score</label>
        <div class="controls">
            <input type="text" class="form-control" placeholder="Score" ng-model="fixture.HomeTeamScore" id="HomeTeamScore" name="HomeTeamScore"  />
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.AwayTeamName.$invalid}">
        <label class="control-label" for="AwayTeamName">Away Team</label>
        <div class="controls">
            <select class="form-control" ng-model="fixture.AwayTeamId" ng-options="team.TeamId as team.TeamName for team in teams" required>
                <option style="display:none" value="">Select</option>
            </select>
            <span ng-show="form.AwayTeamName.$dirty && form.AwayTeamName.$error.required">Away Team required</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.AwayTeamScore.$invalid}">
        <label class="control-label" for="AwayTeamScore">Away Team Score</label>
        <div class="controls">
            <input type="text" class="form-control" placeholder="Score" ng-model="fixture.AwayTeamScore" id="AwayTeamScore" name="AwayTeamScore" />
        </div>
    </div>
    <br />
    <div class="form-actions">
        <button ng-show="form.$valid" ng-click="save()" class="btn btn-primary">{{action}}</button>
        <a href="/Admin/Fixtures/List" class="btn btn-danger">Cancel</a>
    </div>
</form>

1 Answer 1

1

This is a little tricky as we do not see the code for making a selection, routes, or how the controllers are invoked.

However, I believe that only one instance of the FixtureEditController is being created. You can test this by adding a breakpoint or console log to FixtureEditController.

Therefore, the call to:

$data.initService('http://lovelyjubbly.cloudapp.net/odata') 

and

var emp = new lovelyjubblyWebApi.Models.Fixture({ FixtureId: $routeParams.fixtureId });

are only made once.

In the edit controller. you will want to detect when the route param changes so you can take action.

$scope.routeParams = $routeParams;
$data.initService('http://lovelyjubbly.cloudapp.net/odata')
.then(function (context) {
    $scope.$watch('$routeParams',function(routeParams){
        // this should run on any change in routeParams (regardless of the current state)
    },true);

I am not certain that watching routeParams is the best approach, if the edit controller is inheriting from the list controller then you could watch "selectedFixture".

1
  • Hi, thanks for your reply, I have added the complete code above as requested. This is my first attempt at this so I don't expect the code is optimal so any advice would be appreciated :)
    – user517406
    Mar 22, 2014 at 18:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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