-2

我尝试使用 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());

};
4

1 回答 1

2

我最终将“data-”部分从“data-ng-change”中删除，并将所有内容放在同一个控制器中，并添加了 Select 2 角度插件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");
        }

    };

}
于 2013-10-23T15:53:43.260 回答