1

電球をクリックしたときに、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; 

    }
};
}  
4

2 に答える 2