CODEWITHSUNDEEP
angularjstwitter-bootstrap
Sole
Sole

Reputation: 3340

UI bootstrap and angular accordian

I am building a app that uses angular js, bootstrap and I opted to try the ui bootstrap (angular directives for bootstrap). I have a accordion with text areas in them, as the user fills them in there is a another div that gets updated i.e via the expressions. It worked fine with bootstrap but now with this it is not. my code is:

<div class="col-lg-4">
    <accordion>
        <accordion-group ng-repeat="group in groups" heading="{{group.title}}">
            <div>
                <textarea class="form-control" rows="3" ng-model="what" id="input" maxlength="200"></textarea>
            </div>
        </accordion-group>
    </accordion>
</div>

Then in a separate div i have:

<div class="col-lg-8">
<div class="well well-lg note">
    <p style="font-size:22px;">My text</p>
    <p>{{what}}</p>
</div>

Any idea's where I am going wrong I am basically trying to bind the data from the accordion text area to a separate DIV??

Upvotes: 0

Views: 108

Answers (1)

ooozguuur
ooozguuur

Reputation: 3466

Example Here.

Html File:

<div ng-controller="TestCtrl">
<div class="col-lg-4">
    <accordion>
        <accordion-group ng-repeat="group in groups" heading="{{group.title}}">
            <div>
                <textarea class="form-control" rows="3" ng-model="what[$index]" id="input" maxlength="200"></textarea>
            </div>
        </accordion-group>
    </accordion>
</div>
    <div class="col-lg-8">
<div class="well well-lg note" >
    <p style="font-size:22px;"></p>
    <p ng-repeat="w in what">{{w}}</p>
</div>
</div>

Js File:

angular.module('myApp', []);

function TestCtrl($scope) {
    $scope.what=[];
    $scope.groups =  [{"title":"A"},{"title":"B"}];

}

Upvotes: 1

Related Questions