Javascript 使用fadetoggle jquery重复ng

我的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>

---

这不是解决问题的好办法，仍然需要让脚本正常工作

元素的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>

演示：

一个使用ng方式的简单解决方案（无幻灯片动画）

{{app.name}

---

演示：

如果你想玩angular，请使用angular方法。使用checbox的

ng model

激活textarea的

ng show

，并可以使用

ng class

使用

ng animate

方法创建动画必须阅读：由于

ng repeat

必须委托，但使用jQuery进行此操作确实毫无意义。由于angular digest Cycles，hide（）将不起作用。在使用jQuery进行DOM操作时，最好的方法是从angular指令中使用它……然后，当它触发并且angular已经完成操作时，元素就存在了thing@charlietfl我正打算写一本。。。然后进入了另一个对你来说不太合适的话题……我知道你在游戏中处于领先地位。。。对OP来说意味着更多。

<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();
    })
});

<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>