I have a json like below, I am getting it from database and displaying it on my html view page(using ng-repeat and displaying like form input fields, like if key1 is fieldname then 10 is it's corresponding value which we enter in text box). Here I need, if I put my cursor/mouse over key1 field then it should show some tooltip message(like: it's a key1 field), and similarly for all fields. Please let me know that how can I do this ? Is there any examples are available ? Thanks in advance.
我有一个像下面的json,我从数据库中获取它并在我的html视图页面上显示它(使用ng-repeat并显示类似表单输入字段,如果key1是fieldname那么10是它是我们在文本框中输入的相应值)。在这里我需要,如果我将光标/鼠标放在key1字段上,那么它应该显示一些工具提示消息(例如:它是一个key1字段),并且对于所有字段也是如此。请让我知道我该怎么做?有没有可用的例子?提前致谢。
test = {
"tests": {
"testjson": {
"key1": 10,
"key2": "second",
"key3": 20
}
}
}
1 个解决方案
#1
0
Below code snippet will give you an idea about how to proceed further on your code.
下面的代码片段将为您提供有关如何继续进行代码的建议。
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="angular.js@1.5.3" 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>#1
0
Below code snippet will give you an idea about how to proceed further on your code.
下面的代码片段将为您提供有关如何继续进行代码的建议。
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="angular.js@1.5.3" 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>