如果復選框選中AngularJS，則顯示圖像

Question

我是學習 AngularJS 的新手，我正在嘗試的是在選中復選框時顯示圖像。

<body ng-app="imgApp" ng-controller="imgCNTRL">

<li class="stay-item" name="hotel" id="hotel1">
            <h2>Hotel Grande Bretagne</h2>
            <img src="https://www.fivestaralliance.com/files/fivestaralliance.com/field/image/nodes/2009/10181/10181_0_hotelgrandebretagne_fsa-g.jpg">
            <p class="img__description">
                Facilities
                <br><br>
                2 swimming pools
                <br>
                Free WiFi
                <br>
                Parking
                <br>
                Spa / Sallon
                <br>
                Bar
                <br>
            </p>
            <br><br>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="reserv" name="reserv">
                <label class="form-check-label" for="reserv">Reservation</label>
            </div>
        </li>

到目前為止，我的代碼是這樣的：

 <script> var app = angular.module('imgApp', []); app.controller('imgCNTRL', function($scope){ $(document).ready(function(){ $('input[name=reserv1]').click(function(){ alert('ok'); $scope.img1 = "https://t-cf.bstatic.com/xdata/images/hotel/max1024x768/328010584.jpg?k=f8243c30e30a6671e3a618ed132f42d10bccd185b464caec8e7bbcb82915d837&o=&hp=1"; }); }); }); </script>

我想要實現的是，如果我單擊 id="reserv" 的按鈕，將顯示此圖像（圖像）。 有什么方便的方法可以實現嗎？

Answer 1

只需在您的復選框中添加一個ng-model="reserv_chk"並在您的 img 中添加一個ng-show="reserv_chk" ：https ://codesandbox.io/s/zealous-edison-uue0ti?file=/index.html

如果復選框選中AngularJS，則顯示圖像

問題描述

1 個解決方案

解決方案1
0 2022-06-29 18:10:26

如果復選框選中AngularJS，則顯示圖像

問題描述

1 個解決方案

解決方案1 0 2022-06-29 18:10:26

解決方案1
0 2022-06-29 18:10:26