У меня есть словарь, определенный в AngularJS, который выглядит так:
$scope.examples = [
{name: 'Key 1', value: "1"},
{name: 'Key 2', value: "2"},
{name: 'Key 3', value: "3"}
];
Я использую ng-repeat, чтобы показать все три ключа в моем документе.
<li ng-repeat="text in examples" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
{{text.name}}
При наведении курсора на ключ я хочу, чтобы значение ключа отображалось в текстовой области. Мне удалось получить статическую строку в текстовом поле при наведении, и мне удалось получить значение по индексу, выполнив что-то вроде этого:
$scope.testWord = $scope.examples[0].value
но я действительно хочу получить значение ключа в текстовой области. Например, наведите курсор мыши на клавишу 2, и значение 2 появится в текстовой области.
Как я могу сделать это с AngularJS?
var app = angular.module('card-builder', ['ngAnimate']);
app.controller('keyValueExample', function($scope) {
$scope.examples = [
{name: 'Key 1', value: "1"},
{name: 'Key 2', value: "2"},
{name: 'Key 3', value: "3"}
];
$scope.hoverIn = function(){
$scope.testWord = "Static value"
//$scope.testWord = $scope.examples[0].value
this.hoverEdit = true;
};
$scope.hoverOut = function(){
$scope.testWord = ""
this.hoverEdit = false;
};
});
.verse-text-input {
font-family: 'Roboto', sans-serif;
font-weight: 600;
padding: 8px;
width: 600px;
height: 120px;
font-size: 18px;
resize: none;
}
li {
width: 200px;
list-style-type: none;
padding: 6px 10px;
}
li:hover {
background: #EEE;
}
<html ng-app="card-builder">
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script data-require="angular-animate@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
<body ng-controller="keyValueExample">
<textarea class="verse-text-input">{{testWord}}</textarea>
<ul>
<li ng-repeat="text in examples" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
{{text.name}}
<span ng-show="hoverEdit" class="animate-show">
</span>
</li>
</ul>
</body>
</html>