element's "collapse" attribute not working?

Question

I'm trying to build a table as in this JSFiddle which I found here.

I notice lots of elements have a collapse="<boolean>" property and as long as the property is true, you will get a nice collapse animation. I tried finding documentation about the collapse attribute online as well and didn't find anything. However, I also noticed the version of angular is rather outdated (1.0.5 instead of 1.5 that I'm currently using). If I try to replace the reference to angular 1.5, the jsfiddle example also stops working. My question is, assuming collapse is deprecated, how can I reproduce this effect in angular 1.5?

A [mcve] would be nice here. Some pointers though: ui-bootstrap does _not_ require jquery or the bootstrap javascript asset. — iH8, Feb 18 '16 at 22:09
@iH8 thanks for the feedback, I just tried referencing a newer version of angular in the fiddle and found that it breaks there too, so I've changed my question from "what's wrong with my code" to "how can I achieve collapse effect in angular 1.5" — PDN, Feb 18 '16 at 22:27
`collapse` is not an angular directive, so I guess example does not work with angular 1.5 because that version might be incompatible with angular-ui-bootstrap you use. https://angular-ui.github.io/bootstrap/ here it says it's tested with angular version 1.4.x. — CKK, Feb 18 '16 at 22:30
@CKK I just tried it with 1.4.0 and 1.4.9 and neither seems to restore original behavior. Do you know where collapse comes from if it's not an angular directive? Also, do you have any alternatives to reproduce this effect? I tried ng-show with .ng-hide-add and .ng-hide-remove classes using ng-animate but wasn't quite able to get that to work since table rows have set height — PDN, Feb 18 '16 at 22:37
This is angular-ui's directive. See here: https://angular-ui.github.io/bootstrap/#/collapse Just seen @iH8's answer, that should do the job. — CKK, Feb 19 '16 at 12:51

iH8 · Accepted Answer · 2016-02-18T23:24:00.520

The collapse/uib-collapse directive belongs to the angular-ui-bootstrap library, the documentation can be found here:

https://angular-ui.github.io/bootstrap/#/collapse

There is nothing wrong with the directive when running under Angular 1.5.0:

angular.module('App', [
    'ngAnimate',
    'ui.bootstrap'
]);

angular.module('App').controller('Controller', [
             '$scope',
    function ($scope) {
        $scope.isCollapsed = false;
    }
]);

<!DOCTYPE html>
    <html ng-app="App">
        <head>
            <meta charset="utf-8" />
            <title>Angular 1.5.0</title>
            <script>document.write('<base href="' + document.location + '" />');</script>
            <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
            <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
            <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
            <script type="application/javascript" src="app.js"></script>
        </head>
        <body ng-controller="Controller">
            <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
         <hr>
            <div uib-collapse="isCollapsed">
          <div class="well well-lg">
                  Some content
                </div>
         </div>
     </body>
    </html>

element's "collapse" attribute not working?

1 Answers1