AngularJS-基于下拉结果的动态名称

时间:2018-08-16 08:30:55

标签: html angularjs drop-down-menu

我有一个小问题,希望有人可以解决。如果要获取ID,这很简单,但是不幸的是,我还需要其他信息。我为每个下拉列表都有标签,对于这些标签,我希望使其具有动态性。因此,您将从下拉列表中选择一个值,然后无论选择什么,它都将成为另一个列表的名称。

Example Image

现在我需要使用ID来存储信息,所以我不能简单地设置它的名称,因为使用了ID。如代码中所示,我首先尝试使用{{targetEntity.user}}作为使其动态化的一种方法,但是可惜它不是名字。我想知道是否仍然可以通过创建另一个变量来获得名称

AngularJS(用于调用值的代码):

  $scope.userList = [{}]
    SpringDataRestService.get(
        {"collection": "users"},
        function (response) {                   // Success Function
            var user= response._embedded.users;
            for (var i = 0, len = user.length; i < len; i++) {
                var newUser = {id: user[i].id, name: user[i].name};
                $scope.userList .push(newUser );
            }
        },
        function (response) {                   // Failure Function
            $scope.alerts.push(new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
        }

    );
    $scope.targetEntity.user= $scope.userList [0].id;

HTML

<div class="form-group">
                        <label for="user"
                               class="col-lg-1 col-sm-1 col-xs-1 control-label no-padding-right">User:</label>
                        <div class="col-lg-4 col-sm-4 col-xs-4">
                            <select theme="bootstrap"
                                    ng-options="user.id as user.name for service in userList"
                                    id="user"
                                    ng-model="targetEntity.user"
                                    class="form-control">
                            </select>
                        </div>
                        <label for="dynamicLabel"
                               class="col-lg-1 col-sm-1 col-xs-1 control-label no-padding-right">{{targetEntity.user}}</label>
                        <div class="col-lg-4 col-sm-4 col-xs-4">
                            <select theme="bootstrap"
                                    id="userGroup"
                                    ng-options="userGroup.name as userGroup.name for userGroup in idList"
                                    ng-model="targetEntity.userGroup"
                                    class="form-control">
                            </select>
                        </div>
                    </div>

很抱歉,如果我的解释不够清楚,希望我提供了足够的详细信息,但您需要更多帮助,请告诉我。预先谢谢你。

1 个答案:

答案 0 :(得分:0)

我认为这就是您要寻找的

/// <reference path="~/GeneratedArtifacts/viewModel.js" />

myapp.OLTP_AddEditLRIDetailsSet.Details_postRender = function (element, contentItem) {
    $("[data-ls-tap='tap:{data.shell.okCommand.command}']").hide(); // Hide Ok Button
    $("[data-ls-tap='tap:{data.shell.cancelCommand.command}']").hide(); // Hide Cancel Button
};


myapp.OLTP_AddEditLRIDetailsSet.Test_Method_execute = function (screen) {
    console.log('execute');
};
myapp.OLTP_AddEditMainTable.AddLRI_execute = function (screen) {
    myapp.showOLTP_AddEditLRIDetailsSet(null, {
        beforeShown: function (OLTP_AddEditLRIDetailsSet) {
            var newLRI = new myapp.LRIDetailsSet();
            newLRI.MainTable = screen.MainTable1;
            OLTP_AddEditLRIDetailsSet.LRIDetailsSet = newLRI;
        },
        afterClosed: function () {
            // Refreshes the content so that the filter queries are applied
            screen.OLTP_LRIDetailsSet.refresh();
            screen.OLTP_LRIDetailsSet.load();
        }
    });
};