javascript - AngularJS 下拉菜单绑定(bind)

Question

我创建了一个下拉列表，该下拉列表已正确填充并捕获所选值的更改。但是，在我的表单中，我有一个对象(团队)列表，我想单击列表中的一个团队，然后在下拉列表中填充该团队的正确详细信息。

编辑:我已经更改了代码以使用工厂，然后可以将其注入(inject)到我的 Controller 中。

这是下拉菜单:

(function () {

    "use strict";

    //getting the existing module
    angular.module("app")
        .controller("divisionsController", divisionsController)
        .directive("divisionDropdown", divisionDropdown);

    //inject http service
    function divisionsController($http, $scope, divisionService) {

        //$scope.divisions = divisionService.all();
    };

    function divisionDropdown() {
        return {
            restrict: "E",
            scope: false,
            controller: "divisionsController",
            template: "<select class='form-control' ng-model='selectedDivision' ng-options='division.divisionName for division in divisions' required>\
                                <option style='display:none' value=''>{{'Select'}}</option>\
                            </select>"
        };
    }
})();

这是我使用它的表单:

    <div class="row" id="divTeam" ng-app="app" ng-controller="teamsController as vm">
            <div class="col-md-4">
                <div class="panel panel-info">

                    <div class="panel-body">

                        <form novalidate id="AddUpdateTeam" name="AddUpdateTeam" ng-submit="vm.addUpdateTeam()">

                            <!--addTeam or updateTeam-->
                            <div class="form-group">
                                <input type="text" ng-model="vm.newTeam.teamId"/>
                            </div>
                            <div class="form-group">
                                <label for="teamName">Team Name</label>
                                <input id="teamName" type="text" class="form-control" name="teamName" ng-model="vm.newTeam.teamName"
                                       required ng-minlength="5" ng-maxlength="50"/>
                                <span ng-show="AddUpdateTeam.teamName.$error.required" class="text-warning">Team Name is required</span>
                                <span ng-show="AddUpdateTeam.teamName.$error.minlength" class="text-warning">Team Name must be at least 5 characters</span>
                                <span ng-show="AddUpdateTeam.teamName.$error.maxlength" class="text-warning">Team Name must be no more than 50 characters</span>
                            </div>
...
                            <div class="form-group">
                                <label for="divisionName">Division Name</label>
                                <division-dropdown></division-dropdown>
                                <p>selected division is : {{ selectedDivision | json }}</p>
                            </div>
                            <div class="form-group">
                                <label for="coachName">Coach Name</label>
                                <coaches-dropdown></coaches-dropdown>
                                <p>selected coach is : {{ vm.newTeam.coach | json }}</p>
                            </div>
                            <div class="form-group">
                                <label for="logoImage">Logo Image</label>
                                <input id="logoImage" type="text" class="form-control" name="logoImage" ng-model="vm.newTeam.logoImage"
                                       required ng-minlength="20" ng-maxlength="100" />
                                <span ng-show="AddUpdateTeam.logoImage.$error.required" class="text-warning">Logo Image is required</span>
                                <span ng-show="AddUpdateTeam.logoImage.$error.minlength" class="text-warning">Logo Image must be at least 20 characters</span>
                                <span ng-show="AddUpdateTeam.logoImage.$error.maxlength" class="text-warning">Logo Image must be no more than 100 characters</span>
                            </div>
                            <div class="form-group">
                                <button type="submit" ng-disabled="AddUpdateTeam.$invalid">Save</button>
                            </div>
                        </form>
                        @*<button data-bind="click:team.clearInputFields()">Cancel</button>*@
                    </div>

                </div>
            </div>

            <div class="col-md-8">
                <div class="text-danger" ng-show="vm.errorMessage">{{ vm.errorMessage }}</div>
                <wait-cursor></wait-cursor>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h2 class="panel-title">Teams</h2>
                    </div>

                    <table class="table table-striped table-bordered table-condensed">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Division</th>
                            <th>Coach</th>
                        </tr>
                        </thead>

                        <tbody ng-repeat="team in vm.teams">
                            <tr>
                                <td>{{ team.teamId }}</td>
                                <td>{{ team.teamName }}</td>
                                <td>{{ team.division.divisionName }}</td>
                                <td>{{ team.coach.coachName }}</td>
                                <td><a ng-click="vm.editTeam(team)" class="btn btn-sm btn-primary">Edit</a></td>
                                <td><a ng-click="vm.deleteTeam(team)" class="btn btn-sm btn-danger">Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

这是 teamController :

    (function () {

    "use strict";

    //getting the existing module
    angular.module("app")
        .controller("teamsController", teamsController);

    //inject http service
    function teamsController($scope, $http, divisionService) {

        $scope.divisions = divisionService.all();

        var vm = this;

        vm.teams = [];

        vm.newTeam = {};

        vm.errorMessage = "";
        vm.isBusy = true;

        //matched to verb, returns promise
        $http.get('http://localhost:33201/api/Teams')
            .then(function(response) {
                //first parameter is on success
                //copy response.data to vm.teams (could alternatively use a foreach)
                angular.copy(response.data, vm.teams);
            }, function(error) {
                //second parameter is on failure
                vm.errorMessage = "Failed to load data: " + error;
            })
            .finally(function() {
                vm.isBusy = false;
            });

        vm.editTeam = function(team) {

            vm.newTeam.division = team.division;
            $scope.selectedDivision = team.division;


            vm.newTeam.teamId = team.teamId;
            vm.newTeam.teamName = team.teamName;
            vm.newTeam.cheerleaderImage = team.cheerleaderImage;
            vm.newTeam.coachImage = team.coachImage;
            vm.newTeam.headerImage = team.headerImage;
            vm.newTeam.coach = team.coach;
            vm.newTeam.logoImage = team.logoImage;
        }

        vm.addUpdateTeam = function() {

            if (vm.team === undefined) {

                //define a service, inject that service into both controllers
                vm.newTeam.division = $scope.selectedDivision;


                //map divisionid and coachid 
                vm.newTeam.divisionId = vm.newTeam.division.divisionId;
                vm.newTeam.coachId = vm.newTeam.coach.coachId;

                vm.isBusy = true;
                vm.errorMessage = "";

                //post, pass newTeam object
                $http.post('http://localhost:33201/api/Teams/Add', vm.newTeam)
                    .then(function(response) {
                        //success
                        vm.teams.push(response.data);
                        vm.teams.sort(function (a, b) {
                            if (a.teamName.toLowerCase() < b.teamName.toLowerCase()) return -1;
                            if (a.teamName.toLowerCase() > b.teamName.toLowerCase()) return 1;
                            return 0;
                        });
                        vm.newTeam = {}; //clear form
                    }, function(error) {
                        //failure
                        vm.errorMessage = "Failed to save new team: " + error;
                    })
                    .finally(function() {
                        vm.isBusy = false;
                    });
            } else {

                alert("edit" + vm.team.teamId);


            }
        }

        vm.deleteTeam = function (team) {

            //bind view model to team
            vm.newTeam.teamId = team.teamId;

            vm.isBusy = true;
            vm.errorMessage = "";

            //delete, pass newTeam object
            $http.delete('http://localhost:33201/api/Teams/Delete/' + vm.newTeam.teamId)
                .then(function (response) {
                    //success
                    //refresh list
                    var index = vm.teams.indexOf(team);
                    vm.teams.splice(index, 1);
                    vm.newTeam = {}; //clear form
                }, function (error) {
                    //failure
                    vm.errorMessage = "Failed to delete team: " + error;
                })
                .finally(function () {
                    vm.isBusy = false;
                });
        }
    };
})();

这是工厂:

(function() {

    "use strict";

    //creating the module, required dependencies
    //always include a dash in directive names, so they will never be confused with actual html elements
    var app = angular.module("app", ["simpleControls"]);

    //use service to inject singleton service into multiple controllers
    //service contains logic to fetch data or manipulate it
    //http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
    app.factory("divisionService", function ($http) {

        var divisions = [];

        var errorMessage = "";
        var isBusy = true;

        //matched to verb, returns promise
        $http.get('http://localhost:33201/api/Divisions')
            .then(function (response) {
                //first parameter is on success
                //copy response.data to vm.divisions (could alternatively use a foreach)
                angular.copy(response.data, divisions);
            }, function (error) {
                //second parameter is on failure
                errorMessage = "Failed to load data: " + error;
            })
            .finally(function () {
                isBusy = false;
            });

        return {
            all: function () {
                return divisions;
            },
            first: function () {
                return divisions[0];
            }
        };
    });

})();

在 vm.editTeam 方法中，行 $scope.selectedDivision = team.division; 不会更改下拉列表中的选定值。这是我第一次尝试此类下拉功能，因此我在这里包含了所有代码，这可能有点难以理解，但是有人可以给我任何关于如何使其工作的建议吗？

非常感谢!

Answer 1

我认为问题在于您没有更新 Controller 中的 $scope，这就是为什么您的变量更改没有传播到 html 元素。

尝试这样的事情:

function teamsController($scope, $http) {  <<< note the new $scope param

    $scope.vm.teams = 'asdfasdf';
}