Wie Tooltip-Nachrichten für JSON-Schlüssel und Werte geben?

Ich habe ein Json wie unten, ich habe es aus der Datenbank immer bin und auf meine HTML-Seite anzeigen Anzeige (ng-repeat und Anzeigen wie Formulareingabefelder verwenden, wie wenn key1 Feldname ist, dann ist 10 wird es entsprechende Wert, den wir in Textfeld eingeben). Hier muss ich, wenn ich meinen Cursor/Maus über key1 Feld, dann sollte es einige Tooltip-Nachricht (wie: it's a key1 field), und ähnlich für alle Felder. Bitte lassen Sie mich wissen, wie kann ich das tun? Gibt es Beispiele? Danke im Voraus.Wie Tooltip-Nachrichten für JSON-Schlüssel und Werte geben?

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

     } 
    } 
}

Quelle

2016-04-18 Dhana

Bootstrap Tooltips? – Rob

eckige Anweisungen für Bootstrap: https://angular-ui.github.io/bootstrap/. Es gibt auch solche für die Stiftung. Wenn Sie nicht mit einem FE-Framework arbeiten, müssen Sie Ihr eigenes erstellen! – panzhuli

hier ist ein Tooltip ich erstellt https://jsfiddle.net/ahmadabdul3/9wzaoa6e/14/ mit reinem html/css –

Im folgenden Codeausschnitt erhalten Sie eine Vorstellung davon, wie Sie mit Ihrem Code weitermachen.

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's 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>

Quelle

2016-04-18 15:54:16

danke für Ihre Antwort, ich habe eine Abfrage hier, zum Beispiel, wenn ich Tooltip-Nachricht etwas anderes für key2 und einige andere Nachricht für key3 brauche, wie kann ich das dann umsetzen? Die obige Lösung ist nur für die gleichen Nachrichten (verschiedene Testnachrichten), aber ich brauche für jeden Schlüssel verschiedene Nachrichten. Bitte lassen Sie mich wissen, wie das geht? Danke im Voraus. – Dhana

Ändern Sie die Funktion * $ scope.getTooltip * basierend auf Ihren Anforderungen. ** Tipp: ** Sie können * switch * Funktion dieses Zeug verwenden. –

Wie Tooltip-Nachrichten für JSON-Schlüssel und Werte geben?

Antwort

Verwandte Themen