Как выдавать всплывающие подсказки для ключей и значений json?

0

У меня есть json, как показано ниже, я получаю его из базы данных и отображаю его на моей странице просмотра html (используя ng-repeat и отображая как поля ввода формы, например, если key1 - это имя поля, а 10 - соответствующее значение, которое мы вводим в текстовое поле). Здесь мне нужно, если я поместил курсор/мышь в поле key1 тогда он должен показать какое-нибудь подсказку (например: it a key1 field) и аналогично для всех полей. Пожалуйста, дайте мне знать, как я могу это сделать? Есть ли примеры? Заранее спасибо.

test = {
    "tests": {
        "testjson": {
            "key1": 10,
            "key2": "second",
            "key3": 20

        }
    }
}
  • 1
    Всплывающие подсказки?
  • 0
    угловые директивы для начальной загрузки: angular-ui.github.io/bootstrap . Есть и такие для основания. Если вы не работаете с фреймворком FE, вам придется создать свой собственный!
Показать ещё 4 комментария
Теги:
twitter-bootstrap-3

1 ответ

0

Ниже фрагмента кода вы получите представление о том, как продолжить работу над вашим кодом.

var app = angular.module('app', []);

app.controller('indexCtrl', function ($scope) {
  
  $scope.test = {
    "tests": {
        "testjson": {
            "key1": 10,
            "key2": "second",
            "key3": 20

        }
    }
  };
    
  $scope.getTooltip = function(key) {
    return "It a " + key + " field";
  };

});
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="indexCtrl">
    <div ng-repeat="(k,v) in test['tests']['testjson']">
      <label>{{k}}</label>
      <input  type="text" value="{{v}}" title={{getTooltip(k)}}><br/>
    </div>
  </body>

</html>
Поделиться
  • 0
    спасибо за ваш ответ, у меня есть один запрос здесь, например, если мне нужно всплывающее сообщение с подсказкой для key2 и другое сообщение для key3, то как я могу реализовать это следующим образом? Решение, приведенное выше, предназначено только для похожих сообщений (разные тестовые сообщения), но для каждого ключа мне нужны разные сообщения. Пожалуйста, дайте мне знать, как это сделать? Заранее спасибо.
  • 0
    измените функцию $ scope.getTooltip в зависимости от ваших потребностей. Совет: вы можете использовать функцию переключения, чтобы сделать это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню