ng-repeat with fadetoggle jquery

Question

I have many form in my angular app like this

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

I want all text area hidden default and specific show text area when i checked box

I tried this jquery code but doesn't work

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

if you wanna play with angular, use angular methods. Use `ng-model` of checbox to activate `ng-show` of textarea...and can use `ng-class` to create the animation using `ng-animate` methods — charlietfl, Dec 02 '13 at 04:21
must read: [How do I “think in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Dec 02 '13 at 04:27

Arun P Johny · Answer 1 · 2013-12-02T04:55:33.153

It is not the angular way to solve it, still to make your script to work

ID of an element must be unique, use class to group similar elemets

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

then

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

Demo: Fiddle

One easy solution using ng-way(without slide animation)

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

Demo: Fiddle

have to delegate due to the `ng-repeat` but is really senseless using jQuery for this. And hide() won't work due to angular digest cycles — charlietfl, Dec 02 '13 at 04:23
best approach when using jQuery for DOM manipulation is use it from within angular directive....then elements exist when it fires and angular has already done it's thing — charlietfl, Dec 02 '13 at 04:30
@charlietfl I was planning to write one... then got into something else — Arun P Johny, Dec 02 '13 at 04:38
last comment not really meant for you....I know you're on top of your game! ...meant more for OP. — charlietfl, Dec 02 '13 at 04:40

ng-repeat with fadetoggle jquery

1 Answers1