更新角度折叠面板中的数组

Question

下面我有一个角度引导手风琴，我正在尝试弄清楚如何将数组正确限定为每个手风琴面板的范围。例如，下面我有一个手风琴，在每个面板中，我打印出一个名为"item"的数组。添加项目按钮将新项目添加到数组并更新每个面板。我的问题是，我如何只更新我单击配置按钮的面板中的数组而不更新其他面板中的数组？我是否需要为每个面板创建 items 数组的实例？

<accordion>
<accordion-group ng-repeat="product in postcodelist">
    <accordion-heading>
        {{product}}
    </accordion-heading>
    <a ng-click="addItem()">Add item</a>
    {{items}}
</accordion-group>

$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};

Answer 1

我确实认为您需要为每个面板创建一个 items 数组的实例。否则，最后一切都会变得混乱。我的修改：

<accordion>
<accordion-group ng-repeat="product in postcodelist">
    <accordion-heading>
        {{product}}
    </accordion-heading>
    <a ng-click="addItemToProduct($index)">Add item</a>        
    {{itemsOfProduct[product]}}
</accordion-group>

和脚本：

$scope.postcodelist = ['post01','post02','post03'];
$scope.itemsOfProduct = {};
$scope.addItemToProduct = function(index) {
    var newItemNo;
    $scope.itemsOfProduct[$scope.postcodelist[index]] = $scope.itemsOfProduct[$scope.postcodelist[index]] || [];
    newItemNo = $scope.itemsOfProduct[$scope.postcodelist[index]].length + 1;
    $scope.itemsOfProduct[$scope.postcodelist[index]].push('Item ' + newItemNo);
}

Answer 2

你真的应该在这个用例中使用一个指令。请查看 Angularjs 文档以获取指令 （https://docs.angularjs.org/guide/directive）。

但是诸如

angular.module('plunker').
directive('accordianBody', [function() {
    var accordianBodyCtrl = function($scope) {  
        $scope.addElement = function(newElement) {
            $scope.accordianArray.push('Item ' + newElement);
        };
    };
    return {
       restrict: 'E',
           scope: {
               accordianArray:"="
           },
           templateUrl: 'my_accordian_body',
           controller: ['$scope', accordianBodyCtrl],
           link: function(scope, element, attrs) {
           }
      };
}]);

此指令将允许您指定您的 html，如下所示

<accordion>
    <accordion-group ng-repeat="product in postcodelist">
    <accordion-heading>
        {{product}}
    </accordion-heading>
    <accordian-body accordian-array="items"></accordian-body>
</accordion-group>

其中items是要为每个手风琴面板更新的数组。您将需要一个父控制器，它以某种方式组织所有单独的数组。您尚未为用例指定任何逻辑。

Answer 3

不，您不必创建多个数组，您可以使用它们，尽管面板只需在面板的作用域上定义它并启动它们，这样它们就不会在找不到数组时启动自己的数组