AngularJS中如何根据课程ID状态控制删除按钮的显示隐藏

你可以利用AngularJS的ng-if指令来控制删除按钮的显示/隐藏，直接给删除按钮元素添加对应的判断条件：

• 仅当课程状态为unavailable时显示删除按钮
• 状态为opening时按钮会自动隐藏（因为条件不满足）

修改后的删除按钮代码 #

<a ng-if="alreadyCheckedCo['i_' + cl.COURSE_ID] == 'unavailable'" 
   ng-really-message="<?= Yii::t('app', "Are you sure to remove item?"); ?>"
   ng-really-click="removeCourseCategory(cl.COURSE_ID);">
    <i class="fa fa-trash"></i>
</a>

完整的列表项代码 #

<li ng-repeat="cl in value">
    <a ng-click="openModalEditCourseCategory('lg','',cl);" href="#"><b>{{cl.S_CODE}} {{cl.S_TITLE}}</b></a>
    <a ng-click="openCourseOutlinePdf(cl)" title="<?= Yii::t('app', 'Course Outline') ?>"><i
      class="fa fa-file-pdf-o"></i>{{cl.COURSE_ID}} </a>
    <span ng-if="alreadyCheckedCo['i_' + cl.COURSE_ID] == 'checking'"
       class="label label-default">Checking...</span>
    <span ng-if="alreadyCheckedCo['i_' + cl.COURSE_ID] == 'opening'"
       class="label label-success">Opened</span>
    <span ng-if="alreadyCheckedCo['i_' + cl.COURSE_ID] == 'unavailable'"
       class="label label-warning">Course Outline Not Available</span>|
    <a ng-if="alreadyCheckedCo['i_' + cl.COURSE_ID] == 'unavailable'" 
       ng-really-message="<?= Yii::t('app', "Are you sure to remove item?"); ?>"
       ng-really-click="removeCourseCategory(cl.COURSE_ID);">
        <i class="fa fa-trash"></i>
    </a>
    <p ng-if="cl.S_SYNOPSIS">{{cl.S_SYNOPSIS}}</p>
    <p ng-if="!cl.S_SYNOPSIS"><?= Yii::t('app', "None") ?></p>
</li>

原理说明：ng-if会根据表达式的布尔值决定是否将元素插入DOM，只有当课程状态匹配unavailable时，删除按钮才会被渲染，其他状态（包括opening）下按钮不会出现在页面中。

内容的提问来源于stack exchange，提问作者shira