Question

我必须使用Angular将鼠标中的按钮内容更改为ON，并使用Angular将其更改为OFF。

<html ng-app="myApp" ng-controller="homeCtrl">  
<head>  
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
<script>
var app = angular.module('myApp', []);  
app.controller('homeCtrl', function ($scope) {  
$scope.alert = function () {  
    this.myHTML = OFF;  
};  
$scope.text = function () {  
    this.myHTML = ON;  
};
})  
</script>
</head>
<body>  
<button ng-mouseenter="alert();" ng-mouseleave="text();"> OFF </button>  
</body>  
</html>

Answer 1

$scope.alert = function () {  
    $scope.text = 'OFF';
};  
$scope.text = function () {  
    $scope.text = 'ON';  
};

和

<button ng-mouseenter="alert();" ng-mouseleave="text();">{{text}}</button>

Answer 2

为什么不使用绑定？

<html ng-app="myApp" ng-controller="homeCtrl">  
<head>  
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
<script>
var app = angular.module('myApp', []);  
app.controller('homeCtrl', function ($scope) {  
$scope.alert = function () {  
    $scope.value = "OFF";  
};  
$scope.text = function () {  
    $scope.value = "ON";  
};

$scope.value="OFF"
})  
</script>
</head>
<body>  
<button ng-mouseenter="alert();" ng-mouseleave="text();"> {{value}} </button>  



</body>  
</html>

如何在angular中改变onmouseout上的innerHTML内容

2 个答案: