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

你应该在这个用例中使用指令。请查看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 2

我认为您需要为每个面板创建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 3

不，你不必创建多个数组，你可以使用它们虽然面板只是在面板的范围内定义并启动它们，所以当它们找不到时，它们不会启动自己的数组

在角度手风琴面板中更新阵列

3 个答案: