UI引导程序和角度手风琴

时间:2015-07-23 11:37:47

标签: angularjs twitter-bootstrap

我正在构建一个使用角度js,bootstrap的应用程序,我选择尝试使用ui bootstrap(用于bootstrap的angular指令)。我有一个带有文本区域的手风琴,当用户填写它们时,还有一个更新的div,即通过表达式。它与bootstrap工作正常但现在不是这样。我的代码是:

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

然后在另一个div中我有:

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

任何想法,我出错了我基本上试图将手风琴文本区域的数据绑定到一个单独的DIV?

1 个答案:

答案 0 :(得分:1)

此处示例。

Html文件:

<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文件:

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

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

}