如果复选框选中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