Question

我尝试过使用data-ng-change =“GrowerCtrl（）” 但我的控制器没有被调用？

非常感谢任何帮助！

修改我已经添加了html和javascript代码......我正在使用Angular / Restangular和Select2

HTML

<html ng-app="MainPage">
<head>
 ***JS includes
</head>
<div ng-controller="AgenciesCtrl"> 
            <div id="divAgency" class="MenuItemDiv">
                <label id="lblAgencyName" class="HeaderLabel">Select agency...</label>
                <select id="AgencyName" ng-model="SelectedAgency" ui-select2 chosen     style="width:250px" ng-options="Agency.AgencyName for Agency in Agencies.AgencyList" data-ng-change="GrowerCtrl()">
                @*<option ng-repeat="Agency in Agencies.AgencyList" >{{Agency.AgencyName}}</option>*@

             </select>
            </div>


         </div> 
        <div ng-controller="GrowerCtrl">       
            <div id="divGrowers"  class="MenuItemDiv">
                <label id="lblGrowers" class="HeaderLabel">Select grower...</label>
                    <select id="Growers" ui-select2 chosen style="width:250px; padding:3px 3px 3px 3px; " ng-options="Grower.GrowerName for Grower in Growers.GrowerList |filter:SelectedAgency">
                        @*<option ng-repeat="Grower in Growers.GrowerList | filter:{SelectedAgency.AgencyID}" >{{Grower.GrowerName}}</option>*@
                    </select>
                </div>

            </div>  
        </div>

的的 **文件/ dialogControl.js

    var FarmMapsApp = angular.module('MainPage', ['restangular']);
FarmMapsApp.directive('chosen', function () {
    $("#AgencyName").select2();
    $("#Growers").select2();
})


function AgenciesCtrl($scope, Restangular) {

    Restangular.setBaseUrl('http://localhost/MappingServicesWebAPI/api');
    Restangular.all('Agency');

    $scope.Agencies = Restangular.all('Agency').getList();


};

的的 **文件/ GrowerList.js

function GrowerCtrl($scope, Restangular) {

    Restangular.setBaseUrl('http://localhost/MappingServicesWebAPI/api');
    Restangular.all('Grower');
    $scope.Growers = Restangular.all('Grower').getList($('#AgencyName').val());

};

Answer 1

我最终将“data-”部分从“data-ng-change”中删除，并将所有内容放在同一个控制器中并添加了Select 2 angular插件https://github.com/angular-ui/ui-select2。这个插件不适用于ng-Options，所以我实现了ng-repeat，现在它正常工作......

新HTML

<div ng-controller="WhoCtrl">
    <div id="divAgency" class="MenuItemDiv">
        <label id="lblAgencyName" class="HeaderLabel">Select agency...</label>
        <select id="AgencyName" ui-select2  ng-model="SelectedAgency" style="width:250px" ng-change="GetGrowers()">
            <option>"Select an agency..."</option>
            <option ng-repeat="Agency in Agencies.AgencyList" value="{{Agency.AgencyID}}">{{Agency.AgencyName}}</option>
        </select>
    </div>

    <div id="divGrowers"  class="MenuItemDiv">
        <label id="lblGrowers" class="HeaderLabel">Select grower...</label>
        <select id="GrowerName" ui-select2  ng-model="SelectedGrower"  style="width:250px; padding:3px 3px 3px 3px;" ng-change="LoadMap()" >
            <option value="0">"Select a grower..."</option>
            <option ng-repeat="Grower in Growers.GrowerList"  value="{{Grower.GrowerID}}">{{Grower.GrowerName}}</option>
        </select>
    </div>
</div>

新控制器

var App = angular.module('MainPage', ['restangular','ui.select2']);

function WhoCtrl($scope, Restangular) {

    Restangular.setBaseUrl('http://localhost/MappingServicesWebAPI/api');
    Restangular.all('Agency');
    $scope.Agencies = Restangular.all('Agency').getList();
    $scope.GetGrowers = function () {

        Restangular.all('Grower');
        $scope.Growers = Restangular.all('Grower').getList({ AgencyID: $("#AgencyName").val() });

    };
    $scope.LoadMap = function () {
        if ($("#GrowerName").val() != 0) {
            LoadMap();
            SlidePanelExpandCollapse("Collapse");
        }

    };

}

AngularJS绑定数据以在更改另一个选择下拉列表的值时选择下拉列表

1 个答案: