電球をクリックしたときに、2 つの画像のオンとオフを切り替えたいと考えています。うまくいくように見えることもあれば、うまくいかないこともあります。ng-repeat と少なくとも 2 つの画像を使用しない限り、ng-click をまったく機能させることができません。1 つの電球の画像を切り替えるにはどうすればよいですか? チェックボックスを同期して、チェックするとライトが点灯し、オフにするとライトが消えるようにする方法はありますか? (私はjavascriptが初めてです)フィドルは次のとおりです: フィドル
<body ng-app="myApp">
<div ng-controller="MyCtrl">
lightbulb is {{state}} <input type="checkbox" ng-model=
"state" ng-true-value="on" ng-false-value="off">
<div ng-repeat="image in images">
<a ng-click="toggleImage(image)">
<img ng-src="{{image.imgUrl}}" />
</a>
</div>
</div>
function MyCtrl($scope) {
//$scope.checkboxState = "off";
//$scope.resetUrl = 'http://www.w3schools.com/js/pic_bulboff.gif';
$scope.state = "on";
$scope.onUrl = 'http://www.w3schools.com/js/pic_bulbon.gif';
$scope.offUrl = 'http://www.w3schools.com/js/pic_bulboff.gif';
$scope.images = [
{imgUrl: 'http://www.w3schools.com/js/pic_bulboff.gif'},
{imgUrl: 'http://www.w3schools.com/js/pic_bulbon.gif'},
];
$scope.toggleImage = function (image) {
if (image === $scope.offUrl) {
image.imgUrl = $scope.onUrl;
} else {
image.imgUrl = $scope.offUrl;
}
};
}