Question

我是AngularJS的新手，当我尝试在不同阵列上重复使用函数时遇到困难，实际上它只是一个数组，而且还有2个内部。任何人都可以告诉我哪里出错了。谢谢。

<body ng-controller="MainCtrl as mainCtrl">

<my-dates ng-repeat="item in mainCtrl.list"></my-dates>

</body>

app.directive('myDates', function() {
    return {
       // scope:{options:'&'},
        restrict:'E',
         template:'<table class="myTable">' +
        '<tr>'+
        '<th><input type="checkbox" ng-model="selectedAll"  ng-click="mainCtrl.checkAll()"></th>'+
        '<th>Start Date:</th>'+
    '<th>End Date:</th>'+
    '<th>Hours:</th>'+
    '<th>Status:</th>'+
    '</tr>'+
    '<tr ng-repeat = "items in item">'+
        '<td><input type="checkbox" ng-model="items.selected"></td>'+
        '<td>{{items.start}}</td>'+
    '<td>{{items.end}}</td>'+
    '<td>{{items.hours}}</td>'+
     '<td>{{items.selected}}</td>'+
    '</tr>'+
    '</table>'+
    '<button class="myButton" ng-click="mainCtrl.add()">Add element</button>'+
    '<button class="myButton" ng-click="mainCtrl.remove()">Remove element</button>'
    }
});

app.controller('MainCtrl', function ($scope, $modal ,$log) {
    var self = this;
    self.list = [[{start:1,end:15,hours:7,selected: false},{start:2,end:14,hours:6,selected: false},{start:3,end:13,hours:5,selected: false},{start:1,end:15,hours:7,selected: false},{start:2,end:14,hours:6,selected: false},{start:3,end:13,hours:5,selected: false}],
        [{start:1,end:15,hours:7,selected: false},{start:1,end:15,hours:7,selected: false}]];
    self.allSelected = false;
    self.add = function () {
        var modalInstance = $modal.open({
            template:  '<div class="modal-header"><h1>Add element to array</h1></div>'+
        '<div class="modal-body">'+

            '<div>'+
            '<span>Enter Start Date:</span>'+
        '<input  ng-model="object.start" type="text"/>'+
            '</div>'+

            '<div>'+
            '<span>Enter End Date:</span>'+
        '<input ng-model="object.end" type="text"/>'+
            '</div>'+

            '<div>'+
            '<span>Enter Work Hours:</span>'+
        '<input ng-model="object.hours" type="text"/>'+
            '</div>'+

            '</div>'+
            '<div class="modal-footer">'+
            '<button class="btn btn-primary" ng-click="ok()">OK</button>'+
            '<button class="btn btn-warning" type="button" ng-click="close()">Cancel</button>'+
            '</div>',
            controller: 'PopupCont',
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });
        modalInstance.result.then(function (object) {
            self.list.push(object);
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    }
    self.remove = function() {
        console.log('tc');
        self.list = self.list.filter(
            function(item) {
                return !item.selected
            }
        );
    }
    self.checkAll = function(){
        if ($scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach(self.list, function(item) {
            item.selected = $scope.selectedAll;
        });
    }
});
app.controller('PopupCont', ['$scope','$modalInstance',function ($scope, $modalInstance) {
    $scope.object = {start:undefined,end:undefined,hours:undefined};
    $scope.ok = function () {
        $modalInstance.close($scope.object);
    };
    $scope.close = function () {
        $modalInstance.dismiss('cancel');
    }

}]);

Answer 1

我想你想要做以下事情：

Plunkr

目前您的代码不知道要选择哪个列表，因此需要进行一些更改：

    '<button class="myButton" ng-click="mainCtrl.add($index)">Add element</button>'+
    '<button class="myButton" ng-click="mainCtrl.remove($index)">Remove element</button>

'

然后在添加：

self.add = function (index) {

参考索引：

    modalInstance.result.then(function (object) {
      console.log(object)
        self.list[index].push(object);
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });

还有删除：

self.remove = function(index) {
    console.log('tc');
    self.list[index] = self.list[index].filter(
        function(item) {
            return !item.selected
        }
    );

这就是你想要的吗？

在Angular指令中的不同数组上使用相同的函数

1 个答案: