Question

我正在尝试使用一个简单的手风琴，顶部有两个按钮：一个按钮打开每个面板，一个按钮折叠它们。

我正在尝试使用jQuery的prop方法来改变每个uib-accordion元素的is-open属性，但是当我点击任一按钮时都没有任何反应。

<div ng-controller="AccordionController">
    <p>
        <button type="button" class="btn btn-default btn-sm" ng-click="openAll()">Open All</button>
        <button type="button" class="btn btn-default btn-sm" ng-click="collapseAll()">Collapse All</button>
    </p>
    <uib-accordion close-others="false">
        <uib-accordion-group class="accordionGroup" ng-repeat="xmlResult in xmlResults" is-open="false">
            <uib-accordion-heading>
                //heading...
            </uib-accordion-heading>
            //content...
        </uib-accordion-group>
    </uib-accordion>
</div>

这是我的控制器

angular.module("ResultsTreeViewer").controller("AccordionController", function ($scope) {

    $scope.openAll = function () {
        $(".accordionGroup").prop("is-open", true);
    };
    $scope.collapseAll = function () {
        $(".accordionGroup").prop("is-open", false);
    }
});

我喜欢Angular唯一的解决方案，但这不是必需的。我只是想让它发挥作用。

Answer 1

我会说不要在控制器内部使用jQuery和Angular。

在每个isOpen记录中包含accordion变量，然后将其设为true＆amp; false通过调用单个函数actionAccordion函数（有意义地以角度方式使用它）。

<强>标记

<p>
    <button type="button" class="btn btn-default btn-sm" ng-click="actionAccordion(true)">Open All</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="actionAccordion(false)">Collapse All</button>
</p>
<uib-accordion close-others="false">
    <uib-accordion-group class="accordionGroup" ng-repeat="xmlResult in xmlResults" 
      is-open="xmlResult.isOpen">
        <uib-accordion-heading>
            //heading...
        </uib-accordion-heading>
        //content...
    </uib-accordion-group>
</uib-accordion>

<强>代码

$scope.actionAccordion = function (flag) {
    angular.forEach($scope.xmlResults, function(xmlResult){
        xmlResults.isOpen = flag;
    })
};

如何使用Jquery更改Angular-UI元素属性

1 个答案: