Javascript AngularJS下拉绑定

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

编辑：我已经更改了代码，使用一个工厂，然后我可以将它注入到我的控制器中

以下是下拉列表：

(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>"
        };
    }
})();

在

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

非常感谢
 我认为问题在于您没有更新控制器中的$scope，这就是为什么您的变量更改没有传播到html元素

试着这样做：

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

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

function teamsController（$scope，$http）{我认为问题在于您没有更新控制器中的$scope，这就是为什么您的变量更改没有传播到html元素

试着这样做：

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

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

function teams控制器（$scope，$http）{
newTeam.division
是一个对象。选项中使用的
divCtrl.divisions
是您以前定义的一个division对象数组。下拉菜单只能显示其
divCtrl.divisions
对象数组中的对象。
所以在editTeam中编辑分区会给你一个新的分区对象

我创造了一个小小提琴


如果您在分区定义中使用第15行而不是第14行，它将不再工作

希望这有帮助

更新：
您没有从divisions控制器访问错误的vm。这是由于作用域：false导致的teamsController（父级）的vm。命名有点混乱，因为您使用vm作为控制器内作用域的引用，但controllerAs语法（divCtrl）中的不同名称。它们应该是相同的。但这不是问题的根源。
newTeam.division
是一个对象。选项中使用的
divCtrl.divisions
是您以前定义的division对象数组。下拉列表只能显示其
divCtrl.divisions
对象数组中的对象。
所以在editTeam中编辑分区会给你一个新的分区对象

我创造了一个小小提琴


如果您在分区定义中使用第15行而不是第14行，它将不再工作

希望这有帮助

更新：
您没有从divisions控制器访问错误的vm。这是由于作用域：false导致的teamsController（父级）的vm。命名有点混乱，因为您使用vm作为控制器内作用域的引用，但controllerAs语法（divCtrl）中的不同名称。它们应该是相同的。但这不是问题的根源。
因为您为
分区下拉列表定义了一个单独的控制器
，您选择的模板中的
ng model='vm.newTeam.division'
将引用
分区控制器
中定义的
vm
。它不会看到
newTeam
定义在
teamsController
中编辑

您可能需要在
分区控制器
中定义
vm.newTeam=$parent.vm.newTeam

编辑：

再想一想，最好使用指令的link/compile函数来填充分区列表，并避免使用分区控制器。
由于为分区下拉列表定义了一个单独的控制器，因此选择模板中的
ng model='vm.newTeam.division'
将重新启动请参阅
divisioncontroller
中定义的
vm
。它将不会看到
teamscocontroller
中定义的
newTeam

您可能需要在
分区控制器
中定义
vm.newTeam=$parent.vm.newTeam

编辑：

再想一想，最好使用指令的link/compile函数来填充分区列表，并避免使用
divisioncontroller
。
Hi，我不认为这是原因，team.division填充正确，但我无法使用该值填充下拉列表。注入$scope似乎不正确帮助。也许我的整个方法都错了？嗨，我不认为这是原因，team.division填充正确，但我无法用该值填充下拉列表。注入$scope似乎没有帮助。也许我的整个方法都错了？你能把它变成js小提琴，并将示例JSON移到..这需要看很多代码：P你可以用它制作一个js小提琴，然后将你的示例JSON移动到..这需要看很多代码：P
(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];
            }
        };
    });

})();

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

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