angularjs - Use same functions over different arrays in Angular directive -
i'm new angularjs , i'm having difficulties when trying reuse functions on different arrays,actually 1 array , has 2 more inside him.can tell me i'm wrong,please.thank you.
<body ng-controller="mainctrl 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 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'); } }]);
i think want following:
at moment code doesn't know list select, couple of changes:
'<button class="mybutton" ng-click="mainctrl.add($index)">add element</button>'+ '<button class="mybutton" ng-click="mainctrl.remove($index)">remove element</button> ' then in add:
self.add = function (index) { refer index:
modalinstance.result.then(function (object) { console.log(object) self.list[index].push(object); }, function () { $log.info('modal dismissed at: ' + new date()); }); and in remove:
self.remove = function(index) { console.log('tc'); self.list[index] = self.list[index].filter( function(item) { return !item.selected } ); is want?
Comments
Post a Comment