ng-repeat with fadetoggle

Question

我的angular应用程序中有很多这样的表单

<form ng-submit="" ng-repeat="app in apps">
    <div class="container">
        <div id="single-app" >
            <div class="checkbox">
                <label><input type="checkbox" id="check-app">{{app.name}}</label>
            </div>
            <img src="{{app.url}}" height="140" width="140">
            <div id="description">
            <textarea></textarea>
            </div>
        </div>
    </div>
    </form>

我希望所有文本区隐藏默认和特定显示文本区时，我复选框

我尝试了这个jquery代码，但不起作用

$(document).ready(function(){
$("#description").hide();
$('#check-app').click(function(){
    $('#description').fadeToggle();
})
});

Answer 1

这不是解决它的角度方法，仍然要让你的脚本工作

元素类的ID必须是唯一的类，请使用对相似的元素进行分组

<form ng-submit="" ng-repeat="app in apps">
    <div class="container">
        <div class="single-app" >
            <div class="checkbox">
                <label><input type="checkbox" class="check-app"/>{{app.name}}</label>
            </div>
            <img src="{{app.url}}" height="140" width="140"/>
            <div class="description">
                <textarea></textarea>
            </div>
        </div>
    </div>
</form>

然后

$(document).ready(function () {
    $(".description").hide();
    $(document).on('click', '.check-app', function () {
        $(this).closest('.single-app').find('.description').stop(true, true).fadeToggle();
    })
});

演示：Fiddle

一个使用ng-way的简单解决方案(没有幻灯片动画)

<form ng-submit="" ng-repeat="app in apps">
    <div class="container">
        <div class="single-app" >
            <div class="checkbox">
                <label><input type="checkbox" class="check-app" ng-model="visible"/>{{app.name}}</label>
            </div>
            <img src="{{app.url}}" height="140" width="140"/>
            <div class="description" ng-show="visible">
                <textarea></textarea>
            </div>
        </div>
    </div>
</form>

演示：Fiddle