jquery到angularjs：折叠面板并更改按钮图像

我正在学习AngularJS（我参加了Udemy课程-AngularJS KickStart，读了几本书，包括Instant AngularJS Starter和使用AngularJS掌握Web应用程序开发，并为此上网），我不知道在使用Angular的show/hide时如何更改按钮图像

下面是我使用jQuery得到的--

HTML:

项目
优先
病例ID
项目说明
地位
场地
请求者
分配给
到期日
001
进行中
美国兄弟会
史密斯，威廉J。
史密斯，威廉J。
09/13/2013
010
等待
知识产权署之家
本吉索耶
本吉索耶
09/16/2013
014
打开
有
本吉索耶
本吉索耶
09/18/2013

jQuery：

<script type="text/javascript">
        $(document).ready(function() {
            $(document).on('click', '.btnToggleLanding', function(e) {
                // alert('clicked');
                var $this = $(this);

                var tbl = $this.parent().data('tbl');
                $('#' + tbl).slideToggle('slow', function() {
                    var $img = $this.attr('src');
                    if ($img.indexOf('open') > -1) {
                        $this.attr('src', '../Images/close_btn.png');
                    } else {
                        $this.attr('src', '../Images/open_btn.png');
                    } // end if
                });
            });
        });
    </script>

$（文档）.ready（函数（）{
$（文档）.on（'click'，'.btnToggleLanding'，函数（e）{
//警报（“点击”）；
var$this=$（this）；
var tbl=$this.parent（）.data（'tbl'）；
$（'#'+tbl）.slideToggle（'slow'，function（）{
var$img=$this.attr（'src'）；
如果（$img.indexOf（'open'）>-1）{
$this.attr（'src'，'../Images/close_btn.png'）；
}否则{
$this.attr（'src'，'../Images/open_btn.png'）；
}//如果结束，则结束
});
});
});

以下是我的AngularJS尝试：

<div id="landing_header_bar" data-tbl="tblProjects" class="clr-gold">
                <img class="btnToggleLanding" src="../Images/close_btn.png" alt="Close This" ng-model="collapsed" ng-click="collapsed=!collapsed">
                <h3 class="divider_title inlined">Projects</h3>
            </div>
            <table id="tblProjects" class="tblLanding" ng-hide="collapsed">
              <tr class="landing_header_row">
                <th>Priority</th>
                <th>Case ID</th>
                <th>Project Description</th>
                <th>Status</th>
                <th>Site</th>
                <th>Requestor</th>
                <th>Assigned To</th>
                <th>Due Date</th>
              </tr>
              <tbody>
                <tr class="landing_data_row">
                  <td><div class='sprite indicRed centered'></div></td>
                  <td style="text-align:center;">001</td>
                  <td><a href="EditProject.html">New case 2</a></td>
                  <td>In Progress</td>
                  <td>Brother USA</td>
                  <td>Smith, William J.</td>
                  <td>Smith, William J.</td>
                  <td>09/13/2013</td>
                </tr>
                <tr class="landing_data_row">
                  <td><div class='sprite indicRed centered'></div></td>
                  <td style="text-align:center;">010</td>
                  <td><a href="EditProject.html">We Must have a new task system</a></td>
                  <td>Waiting</td>
                  <td>IPD Home</td>
                  <td>Sawyer, Benji</td>
                  <td>Sawyer, Benji</td>
                  <td>09/16/2013</td>
                </tr>
                <tr class="landing_data_row">
                  <td><div class='sprite indicRed centered'></div></td>
                  <td style="text-align:center;">014</td>
                  <td><a href="EditProject.html">amet</a></td>
                  <td>Open</td>
                  <td>HAD</td>
                  <td>Sawyer, Benji</td>
                  <td>Sawyer, Benji</td>
                  <td>09/18/2013</td>
                </tr>
            </table>

项目
优先
病例ID
项目说明
地位
场地
请求者
分配给
到期日
001
进行中
美国兄弟会
史密斯，威廉J。
史密斯，威廉J。
09/13/2013
010
等待
知识产权署之家
本吉索耶
本吉索耶
09/16/2013
014
打开
有
本吉索耶
本吉索耶
09/18/2013

隐藏/显示工作得很完美，但我不知道如何使用AngularJS更改图像。有人能给我指出正确的资源吗，或者告诉我如何像在jQuery版本中那样交换图像

---

提前谢谢

您可以切换两个图像，而不是切换一个图像的源：

<img alt="Close This"
  ng-click="collapsed = true" 
  ng-show="collapsed == false" />
<img alt="Open This" 
  ng-click="collapsed = false" 
  ng-show="collapsed == true" />

---

这里是一个演示：

您可以分别使用ng show和ng hide

<img alt="Close This" ng-click="collapsed = true" ng-hide="collapsed" />
<img alt="Open This" ng-click="collapsed = false" ng-show="collapsed" />

---

要更改image

src

属性，就像您拥有的等效jQuery一样，您可以使用

ng src

，并根据

$watch

更新链接本身。简单的例子如下：

<img alt="Close This" ng-click="collapsed = true" ng-hide="collapsed" />
<img alt="Open This" ng-click="collapsed = false" ng-show="collapsed" />