AngularJS - динамическое имя на основе раскрывающегося списка

У меня небольшая проблема, и я надеюсь, что кто-нибудь сможет ее решить. Это просто, если я хочу взять удостоверение личности, но, к сожалению, мне нужна другая информация. У меня есть ярлыки для каждого из моих раскрывающихся списков, и для одного из них я хотел бы сделать его динамическим. Итак, вы должны выбрать значение из раскрывающегося списка, а затем все, что вы выбрали, будет именем для другого списка.

Пример изображения

Теперь мне нужно использовать идентификатор для хранения информации, поэтому я не могу просто установить его имя, поскольку вместо него используется идентификатор. Как показано в коде, я сначала попробовал {{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>

Извините, если мои объяснения недостаточно ясны. Надеюсь, я предоставил достаточно подробностей, но вам нужна дополнительная помощь, дайте мне знать. Заранее спасибо.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
107
1

Ответы 1

Я думаю это то что ты ищешь

var app = angular
  .module("myApp", [])
  .controller("myController", function($scope) {
	$scope.names = ["Data", "All users", "X","Y"];
                    
  });
<!DOCTYPE html>
<html>

<head>
  <title>Machine Test</title>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body ng-app = "myApp">
  <div ng-controller = "myController">
    Normla Drop Down
    <select ng-model = "selectedName" ng-options = "x for x in names">
    </select>
    <br>
    <br>
    <br> {{selectedName}}
    <select ng-model = "selectedData" ng-if = "selectedName" ng-options = "x for x in names">
    </select>
  </div>

</body>

</html>

Другие вопросы по теме