Question

我在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>

Answer 1

要在函数中检索值，只需在函数中传递text对象

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(text){
        $scope.testWord = text.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(text)" ng-mouseleave="hoverOut()">
				 {{text.name}}
				<span ng-show="hoverEdit" class="animate-show">
				</span>
			</li>
		</ul>
	</body>

	</html>

AngularJS：将鼠标悬停在键上时，在文本区域中显示其值

1 个答案: