Question

嗨，我正试图隐藏一个引导按钮。只有当我点击一个复选框时，我才能看到它们。但是我无法实现。有人可以帮忙吗？

HTML

<input type="checkbox" ng-model="todo.done" value="{{todo.task_name}}">
<span class="done-{{todo.done}}"> {{todo.task_name}}</span>         
<a id="done-modal-button" ng-click='onCompleteTask(todo)' ng-model="todo.done" class="btn btn-xs btn-success">Done</a>

JS

$('#done-modal-button').hide();

Answer 1

你不需要Jquery这样做！您只需要更改此行：

<a id="done-modal-button" ng-click='onCompleteTask(todo)' ng-model="todo.done" class="btn btn-xs btn-success">Done</a>

对此：

<a id="done-modal-button" ng-click='onCompleteTask(todo)' ng-show="todo.done" class="btn btn-xs btn-success">Done</a>

您只想在“todo.done”为真时显示链接

http://jsfiddle.net/HB7LU/9139/

我建议你阅读这篇文章：

"Thinking in AngularJS" if I have a jQuery background?

Answer 2

尝试使用CSS display:none隐藏它：

<a id="done-modal-button" ng-click='onCompleteTask(todo)' ng-model="todo.done" class="btn btn-xs btn-success" style="display:none;">Done</a>

根据您的评论进行更新

要根据天气情况切换可见性，选中是否选中复选框，您需要先查看是否先检查，如果是，请显示按钮，否则将其隐藏。

$(document).ready(function() {    
    $('#checkboxid').click(function() {
        if($(this).is(":checked"))
        {
            $('#done-modal-button').show();
        } else {
            $('#done-modal-button').hide();
        }
    });
});

<强> Working JSfiddle

更新2

我猜你的脚本中没有其他jquery库，要使用上面的方法你可以使用我在评论中给你的jsfiddle中的方法或者你可以加载jquery-1.9.1它会工作，看到这个JSFIDDLE使用AngularJS和jQuery-1.9.1

要加载库，只需在头标记中添加：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

无法隐藏引导按钮

2 个答案: