Question

我有这个应用程序，用户可以从下拉钻取三个级别选择一个故障列表，我遇到的问题是他们打开要编辑的项目，第一个下拉填充页面加载和选择保存数据中的项目，第二个填充选项但不选择任何项目，第三个相同的控制器：

.controller("Ctrl", function ($scope, $http) {
    var urlString = systems.systems + "/getIssueCodes/" + Id.Id;
    $http({
        method: 'GET',
        url: urlString,
        dataType: "json"
    }).then(function successCallback(response) {
        var data = response;
        if (data.data.name1 !== "") {
            $scope.Fault = data.data.name1;
            f1 = data.data.id1;

            $scope.faultChangedLoad(f1, (data.data.id2 === null ? "" : data.data.id2));

            $scope.Fault1 = data.data.name2;
        }
        if (data.data.name2 !== "") {
            f2 = data.data.id2;
            $scope.fault1ChangedLoad(f2, (data.data.name3 === null ? "" : data.data.name3));
        }
        if (data.data.name3 !== null) {

            f3 = data.data.id3;
        }

        $scope.Desc = data.data.desc;

    });

    $scope.faultChangedLoad = function (Fault, selected) {

    var urlStr = systems.systems + "/faultCodes/" + Fault;
    $http({
        method: 'GET',
        url: urlStr,
        dataType: "json"
    }).then(function successCallback(response) {
        $scope.fault1Codes = [];
        if (response.data.length > 0) {
            var ms4 = angular.element(document.querySelector('#Main-select4'));
            ms4.removeClass("no-show");
            ms4.addClass("item item-select");
            var ms6 = angular.element(document.querySelector('#Main-select6'));
            if (ms6.hasClass("item")) {
                ms6.removeClass("item item-select");
                ms6.addClass("no-show");
            }
        }
        else {
            var ms41 = angular.element(document.querySelector('#Main-select4'));
            if (ms41.hasClass("item")) {
                ms41.removeClass("item item-select");
                ms41.addClass("no-show");
            }
            var ms61 = angular.element(document.querySelector('#Main-select6'));
            if (ms61.hasClass("item")) {
                ms61.removeClass("item item-select");
                ms61.addClass("no-show");
            }
        }

        $scope.fault1Codes = response.data;

        $scope.Fault1 = selected;
        });
    }
    $scope.fault1ChangedLoad = function (Fault, selected) {

    $http({
        method: 'GET',
        url: systems.systems + "/faultCodes/" + Fault,
        dataType: "json"
    }).then(function successCallback(response) {
        $scope.fault2Codes = [];
        if (response.data.length > 0) {
            var ms6 = angular.element(document.querySelector('#Main-select6'));
            ms6.removeClass("no-show");
            ms6.addClass("item item-select");
        }
        else {
            var ms61 = angular.element(document.querySelector('#Main-select6'));
            if (ms61.hasClass("item")) {
                ms61.removeClass("item item-select");
                ms61.addClass("no-show");
            }
        }
        $scope.fault2Codes = response.data;
        $scope.Fault2 = selected;
    });

    }
}

查看：

<label class="item item-select" id="Main-select5">
    <span class="input-label">Issue Code:</span>
    <select ng-model="Fault" ng-change="faultChanged(Fault)">
        <option ng-repeat="faultCode in faultCodes" ng-selected="faultCode.text === Fault" value="{{faultCode.value}}">{{faultCode.text}}</option>
    </select>
</label>
<label class="no-show" id="Main-select4">
    <span class="input-label"></span>
    <select ng-model="Fault1" ng-change="fault1Changed(Fault1)">
        <option ng-repeat="fault1Code in fault1Codes" ng-selected="fault1Code.text === Fault1" value="{{fault1Code.value}}">{{fault1Code.text}}</option>
    </select>

</label>
<label class="no-show" id="Main-select6">
    <span class="input-label"></span>
    <select ng-model="Fault2">
        <option ng-repeat="fault2Code in fault2Codes" ng-selected="fault2Code.text === Fault2" value="{{fault2Code.value}}">{{fault2Code.text}}</option>
    </select>
</label>
<label class="item item-input" id="Main-textarea1">
    <span class="input-label">Description:</span><input type="text" placeholder="Enter  Description" ng-model="Desc">
</label>

我到处寻找解决方案，我尝试过ng-options但是没有帮助。

感谢任何帮助，谢谢

Answer 1

我找到了一个有效的解决方案，我想把它放在这里以防其他人有同样的问题。我找不到任何帮助，所以我回到书中，阅读了几章后，我看到（在要求中没有提到）一些显示ng值而不是值的代码我尝试了它，它工作，数据是正在展示。

谢谢

Angularjs在页面加载时动态选择选项

1 个答案: