Angularjs 角度JS收音机列表和下拉列表。触发时，下拉列表更改收音机列表值的问题

我想我的角度有一个逻辑问题，我需要一些帮助。 我们有一个连接到数据库的服务，该数据库获取保存的值，因此我们的角度表单可以获取值并使用它们。一切都安排好了

我的问题是，在我们的表单中，我们有1个单选按钮列表，使用ng repeat生成列表和3个下拉列表。我们的下拉列表正在触发和更新功能，以更新自身的值。我们正在显示和隐藏基于单选按钮列表选择的下拉菜单（我将发布代码）。应该注意的是，我们正在使用此控件用于的Umbraco CMS，但这不是实际问题

问题是，我们控制我们的响应，单选按钮列表的值输出与我们选择的选择很好，但是当我选择一个下拉列表项时，下拉列表的值返回到以前选择的值。如果您能帮我解决这个问题，我们将不胜感激

代码如下：

my.controller.js

angular.module("umbraco")
    .controller("Our.GalaxyEventSelectorController", function ($scope,       $routeParams, notificationsService, GalaxyEventSelectorResource) {
    $scope.emptyList = [{}];
    $scope.ETypeRadio = { 0: "NA", 1: "RepeatingTimedEvent", 2: "RepeatSingleDayEvent", 3: "SingleTimedEvent" };
    GalaxyEventSelectorResource.getEventById($routeParams.id,    $scope.model.alias).then(function (response) {
        // console.log("REsponse: " + response);
        console.log("intial load on DOM load")
        var resp = (response.data.indexOf("{") > -1 ? angular.fromJson(JSON.parse(response.data)) : "");

        $scope.previousSelectedTypeOfEvent = (resp == "" ? "" : resp.TypeOfEvent);
        $scope.previousSelectedEventTypeId = (resp == "" ? 0 : resp.EventTypeId);
        $scope.previousSelectedEventName = (resp == "" ? "" : resp.EventName);
        $scope.previousSelectedEventId = (resp == "" ? 0 : resp.EventId);
        $scope.previousSelectedEventDate = (resp == "" ? "" : resp.EventDate);
        //This loads the selection the initial time.
        $scope.selectedTypeOfEvent = $scope.previousSelectedTypeOfEvent;  //THIS Gets the previous radio button selection

        //init EventTypeId dropdown
        var initIdx = 0;
        $scope.getEventTypeIds(true, initIdx);


    }).then(function() {
        //init Name dropdown
        var initIdx = -1;
        $scope.getEventNames(true, initIdx, $scope.previousSelectedEventTypeId);

    }).then(function () {
        //init EventIds and Dates dropdowns
        var initIdx = -1;
        $scope.getEventIdsAndDates(true, initIdx, $scope.previousSelectedEventName);
        $scope.getEventDatesOnly(true, initIdx, $scope.previousSelectedEventName);

    }).then(function () {
        // init model values
        $scope.typeOfEventRadioSelected($scope.previousSelectedTypeOfEvent);
         $scope.updateModelValue(
            $scope.previousSelectedTypeOfEvent,
            $scope.previousSelectedEventTypeId,
            $scope.previousSelectedEventName,
            $scope.previousSelectedEventId,
            $scope.previousSelectedEventDate);
    });

$scope.updateModelValue = function (typeOfEvent, eventTypeId, eventName, eventId, eventDate) {
    $scope.model.value = {
        TypeOfEvent: typeOfEvent,
        EventTypeId: eventTypeId,
        EventName: eventName,
        EventId: eventId,
        EventDate: eventDate
    }
    console.log("Scope load and scope change");
    console.log($scope.model.value);
};

//not used...attempting to make the visual nice onscreen but causes unpredictable loss of data.  could be useful
$scope.addSpacesToCamelCase = function(txt) {
    return txt.replace(/([a-z])([A-Z])/g, "$1 $2");
}

$scope.typeOfEventRadioSelected = function(selectedTypeOfEvent) {
    //triggered when radio button selected.
    var typeOfEvent = selectedTypeOfEvent;
    var eventTypeId = $scope.selectedGalaxyEventTypeId != null
        ? $scope.selectedGalaxyEventTypeId.EventTypeId
        : "";

    var eventName = "";
    var eventId = "";
    var eventDate = "";
    var initIdx = -1;

    $("#GalaxyEventNameDdl").show();
    $("#GalaxyEventIdDdl").show();
    $("#GalaxyEventDatesDdl").show();

    switch (selectedTypeOfEvent) {
        case "NA":
            $scope.getEventNames(false, initIdx, eventTypeId);
            $scope.GalaxyEventIdsAndDates = $scope.initial;
            $scope.GalaxyEventDates = $scope.initial;

            $("#GalaxyEventNameDdl").hide();
            $("#GalaxyEventIdDdl").hide();
            $("#GalaxyEventDatesDdl").hide();
            break;
        case "RepeatingTimedEvent":
            //$scope.getEventNames(false, initIdx, eventTypeId);
            eventName = $scope.selectedGalaxyEventName != null 
                ? $scope.selectedGalaxyEventName.EventName
                : "";
            $scope.GalaxyEventIdsAndDates = $scope.initial;
            $scope.GalaxyEventDates = $scope.initial;

            $("#GalaxyEventIdDdl").hide();
            $("#GalaxyEventDatesDdl").hide();
            break;
        case "RepeatSingleDayEvent":
            //$scope.getEventNames(false, initIdx, eventTypeId);
            eventName = $scope.selectedGalaxyEventName != null
                ? $scope.selectedGalaxyEventName.EventName
                : "";
            $scope.getEventDatesOnly(false, initIdx, eventName);
            eventDate = $scope.selectedGalaxyEventDates != null
                ? $scope.selectedGalaxyEventDates.EventDate
                : "";
            $scope.GalaxyEventIdsAndDates = $scope.initial;

            $("#GalaxyEventIdDdl").hide();
            break;
        case "SingleTimedEvent":
            //$scope.getEventNames(false, initIdx, eventTypeId);
            eventName = $scope.selectedGalaxyEventName != null
                ? $scope.selectedGalaxyEventName.EventName
                : "";
            $scope.getEventIdsAndDates(false, initIdx, eventName);
            eventId = $scope.selectedGalaxyEventId != null
                ? $scope.selectedGalaxyEventId.EventId
                : "";
            eventDate = $scope.selectedGalaxyEventDates != null
                ? $scope.selectedGalaxyEventDates.EventDate
                : "";
            $scope.GalaxyEventDates = $scope.initial;

            $("#GalaxyEventDatesDdl").hide();
            break;
    }

$scope.updateModelValue(
        typeOfEvent,
        eventTypeId,
        eventName,
        eventId,
        eventDate
    );
};

$scope.eventTypeIDSelected = function (selectedEventTypeId) {
    console.log("Event Type ID selected");
    //triggered when EventTypeId dropdown is changed.  update the datatype value & provide names in name dropdown
    var initIdx = -1;
    $scope.getEventNames(false, initIdx, selectedEventTypeId.EventTypeId);
    $scope.GalaxyEventIdsAndDates = $scope.initial;// NOT WORKING TO WIPE THE LIST...WHY?
    $scope.GalaxyEventDates = $scope.initial;  // NOT WORKING TO WIPE THE LIST...WHY?
    $scope.updateModelValue(
        $scope.selectedTypeOfEvent,
        selectedEventTypeId.EventTypeId,
        "",
        "",
        "");
};

$scope.eventNameSelected = function (selectedName) {
    //triggered when eventName dropdown is changed.  update the datatype value & provide dates and ids in dropdowns
    var initIdx = -1;
    $scope.getEventIdsAndDates(false, initIdx, selectedName.EventName);
    $scope.getEventDatesOnly(false, initIdx, selectedName.EventName);
    $scope.updateModelValue(
        $scope.selectedTypeOfEvent,
        $scope.selectedGalaxyEventTypeId.EventTypeId,
        selectedName.EventName,
        "",
        "");
};

$scope.eventIdSelected = function (selectedEventId) {
    //triggered when eventId dropdown is changed.  update the datatype value & init date dropdown
    var initIdx = -1;
    $scope.getEventDatesOnly(false, initIdx, $scope.selectedGalaxyEventName.EventName);
    $scope.updateModelValue(
        $scope.selectedTypeOfEvent,
        $scope.selectedGalaxyEventTypeId.EventTypeId,
        $scope.selectedGalaxyEventName.EventName,
        selectedEventId.EventId,
        selectedEventId.EventDate);
};

$scope.eventDatesSelected = function (selectedEventDate) {
    //triggered when eventDate dropdown is changed.  update the datatype value & init Id dropdown
    var initIdx = -1;
    $scope.getEventIdsAndDates(false, initIdx, $scope.selectedGalaxyEventName.EventName);
    $scope.updateModelValue(
        $scope.selectedTypeOfEvent,
        $scope.selectedGalaxyEventTypeId.EventTypeId,
        $scope.selectedGalaxyEventName.EventName,
        "",
        selectedEventDate.EventDate);
};

$scope.getEventTypeIds = function (initVal, idx) {
    GalaxyEventSelectorResource.getEventIds().then(function (eventTypeIds) {
        $scope.GalaxyEventTypes = eventTypeIds.data;
        console.log("successfully retrieved galaxyeventids");
            //console.log("Event Type IDs:", eventTypeIds.data[0]);

        if (initVal) {
            $scope.GalaxyEventTypes.some(function (x, i) {
                if (x.EventTypeId == $scope.previousSelectedEventTypeId) {
                    idx = i;
                    return true;
                }
            });
        }
        $scope.selectedGalaxyEventTypeId = $scope.GalaxyEventTypes[idx];


    },
        function (data) {
            console.log("failed to retrieve galaxyeventids");
        });

};

$scope.getEventNames = function (initVal, idx, eventTypeId) {
    GalaxyEventSelectorResource.getEventNamesByEventId(eventTypeId).then(function (eventNames) {
        $scope.GalaxyEventNames = eventNames.data;
        console.log("successfully retrieved galaxyeventnames");
        if (initVal) {
            $scope.GalaxyEventNames.some(function (x, i) {
                if (x.EventName == $scope.previousSelectedEventName) {
                    idx = i;
                    return true;
                }
            });
        }
        $scope.selectedGalaxyEventName = $scope.GalaxyEventNames[idx];


    },
        function (data) {
            console.log("failed to retrieve galaxyeventnames");
        });

};

$scope.getEventIdsAndDates = function(initVal, idx, eventName) {
    GalaxyEventSelectorResource.getEventIdsAndDatesByEventName(eventName).then(function (eventIds) {
            $scope.GalaxyEventIdsAndDates = eventIds.data;
            console.log("successfully retrieved galaxyIdsanddates");
            if (initVal) {
                $scope.GalaxyEventIdsAndDates.some(function(x, i) {
                    if (x.EventId == $scope.previousSelectedEventId) {
                        idx = i;
                        return true;
                    }
                });
            }
            $scope.selectedGalaxyEventId = $scope.GalaxyEventIdsAndDates[idx];
        },
        function(data) {
            console.log("failed to retrieve galaxyIdsanddates");
        });
};

$scope.getEventDatesOnly = function (initVal, idx, eventName) {
    GalaxyEventSelectorResource.getEventDatesByEventName(eventName).then(function (eventDates) {
        $scope.GalaxyEventDates = eventDates.data;
        console.log("successfully retrieved galaxydates");
        if (initVal) {
            $scope.GalaxyEventDates.some(function (x, i) {
                if (x.EventDate == $scope.previousSelectedEventDate) {
                    idx = i;
                    return true;
                }
            });
        }

            $scope.selectedGalaxyEventDates = $scope.GalaxyEventDates[idx];
        },
        function (data) {
            console.log("failed to retrieve galaxydates");
        });

};

EventSelector.html

 <div ng-controller="Our.GalaxyEventSelectorController">
<h5>Select Type of Event</h5>

<!--<div>-->

    <div ng-repeat="n in ETypeRadio">
        <!-- need to use ng-click as an ng-change on an ng-repeat element does not work -->
      <!-- <input type="radio" ng-model="selectedTypeOfEvent" name="tOfE" ng-click="typeOfEventRadioSelected(selectedTypeOfEvent)" ng-value="{{n}}" value="{{n}}" />{{n}}-->
        <input type="radio" ng-model="selectedTypeOfEvent" name="tOfE" ng-click="typeOfEventRadioSelected(selectedTypeOfEvent)" ng-value="{{n}}" value="{{n}}" />{{n}}
    </div>

<!--</div>-->
<h5>Galaxy Event Type</h5>
<select ng-model="selectedGalaxyEventTypeId" ng-change="eventTypeIDSelected(selectedGalaxyEventTypeId)" ng-options="eventType.EventTypeId + ' - ' + eventType.EventTypeIdDescription for eventType in GalaxyEventTypes track by eventType.EventTypeId"></select>
<br/>
<div id="GalaxyEventNameDdl">
    <h5>Galaxy Event Name</h5>
    <select ng-model="selectedGalaxyEventName" ng-change="eventNameSelected(selectedGalaxyEventName)" ng-options="name.EventName for name in GalaxyEventNames">
        <option value=""> --- Select Event Name ---</option>
    </select>
    <br />
</div>
<div id="GalaxyEventIdDdl">
    <h5>Galaxy Event Id</h5>
    <select data-ng-model="selectedGalaxyEventId" ng-change="eventIdSelected(selectedGalaxyEventId)" ng-options="id.EventId + ' - ' + id.EventDate for id in GalaxyEventIdsAndDates track by id.EventId">
        <option value=""></option>
    </select>
    <br />
</div>
<div id="GalaxyEventDatesDdl">
    <h5>Galaxy Event Date</h5>
    <select data-ng-model="selectedGalaxyEventDates" ng-change="eventDatesSelected(selectedGalaxyEventDates)" ng-options="date.EventDate for date in GalaxyEventDates">
        <option value=""></option>
    </select>
</div>

---

您可以发布一个jsFiddle（）来演示这个问题吗？我尝试加载此票证中的内容，但无法使其工作。@Zeph我会这样做。@Zeph我不确定如何在JSFIDLE中执行角度设置，但我想我知道为什么无法加载，因为控制器中的控制器名称与HTML中的不同。我试着不使用我们的实时代码，但现在应该是一样的。有人知道吗？

  angular.module("umbraco.resources").factory("GalaxyEventSelectorResource", function ($http) {
var galaxyEventService = {};

galaxyEventService.getEventIds = function () {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetAllEventTypeIDs");
};

galaxyEventService.getEventById = function (id, propertyType) {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventById?id=" + id + "&propertyType=" + propertyType);
};

galaxyEventService.getEventNamesByEventId = function(eventId) {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventNamesByEventId?eventId=" + eventId);
};

galaxyEventService.getEventIdsAndDatesByEventName = function(eventName) {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventIdsAndDatesByEventName?eventName=" + eventName);
};

galaxyEventService.getEventDatesByEventName = function(eventName) {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventDatesByEventName?eventName=" + eventName);
};