javascript - 使用 JayData 和 AngularJs 进行 CRUD 编辑

Question

我正在尝试使用 JayData、AngularJS 和 OData Web Api 创建一个基本的 CRUD 应用程序。到目前为止，我已经创建了一个 ListView 和一个编辑 View ，当单击 ListView 中某个项目的编辑选项时，它成功重定向到编辑 View 并按预期填充。但是，当我返回 ListView 并选择后续编辑选项时，编辑 View 不会被填充。这是我的相关 Angular 代码:

编辑:这是我的完整代码，按要求:

应用程序.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"); 
            }
        };
    });
};

ListView :

<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>

添加/编辑 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>

Answer 1

这有点棘手，因为我们看不到用于进行选择、路由或如何调用 Controller 的代码。

但是，我认为只创建了一个 FixtureEditController 实例。您可以通过向 FixtureEditController 添加断点或控制台日志来对此进行测试。

因此，调用:

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

和

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

只制作一次。

在编辑 Controller 中。您将需要检测路由参数何时更改，以便您可以采取行动。

$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);

我不确定观看 routeParams 是最好的方法，如果编辑 Controller 继承自列表 Controller ，那么您可以观看“selectedFixture”。