jglom jglom - 1 month ago 6
AngularJS Question

AngularJS / AngularFire - Pass Objects with ng-click

I have a modal (bootstrap) where I load Objects from the Firebase Database. Now I added a ng-Click to "select" an Object.

I want to select 8 Object and "collect" them. After I collected these 8 Objects, I want to pass them to another ng-Click. When I click on the second ng-Click these 8 (selected) Objects are pushed to the Database.

Do you have any idea how to archive that? Thank you!

This is my modal:

<div class="col-md-12">
<ul class="list-group">
<li ng-repeat="team in teams" class="list-group-item">{{ team.allUserTeamName + " - " + team.allUserTeam }}
<i class="fa fa-plus-circle" aria-hidden="true" ng-init="item.isClicked = false" ng-click="selectMembers(team); item.isClicked =!item.isClicked" ng-class="{clicked : item.isClicked}"></i>
</li>
</ul>
</div>

<div class="modal-footer">
<div class="col-md-12">
<div class="row pad-team-selection-view">
<button class="btn btn-info" ng-click="createGameplanWithSelectedMembers(team)">Spielplan erstellen</button>
</div>
</div>
</div>


This is my Controller:

app.controller('modalCreateGameplanController', ['$scope', '$timeout', '$http', '$firebaseArray', '$firebaseObject', function ($scope, $timeout, $http, $firebaseObject, $firebaseArray) {

$scope.selectUsers = 'Teilnehmer';

$scope.$on('modal', function (event, args) {

var ref = firebase.database().ref("users");
var teams = $firebaseObject(ref);

teams.$loaded().then(function () {
$scope.teams = [];
angular.forEach(teams, function (key) {
$scope.teams.push({
allUserTeamName: key.firstname,
allUserTeam: key.team
});

$scope.selectMembers = function (key) {
console.log(key);
};

$scope.createGameplanWithSelectedMembers = function () {
console.log(teams);
};

});
});
});
}]);

Answer Source

In the view use ng-disabled and use selected length as condition to disable the button .

 <div class="col-md-12">
                <ul class="list-group">
                    <li ng-repeat="team in teams" class="list-group-item">{{ team.allUserTeamName + " - " + team.allUserTeam }}
                        <i class="fa fa-plus-circle" aria-hidden="true" ng-init="item.isClicked = false" ng-click="selectMembers(team); item.isClicked =!item.isClicked" ng-class="{clicked : item.isClicked}"></i>
                    </li>
                </ul>
            </div>

            <div class="modal-footer">
                <div class="col-md-12">
                    <div class="row pad-team-selection-view">
                        <button class="btn btn-info" ng-click="createGameplanWithSelectedMembers(team)" ng-disabled="selectCount==8">Spielplan erstellen</button>
                    </div>
                </div>
            </div>

In the controller keep a tracker for selected items $scope.selectCount

app.controller('modalCreateGameplanController', ['$scope', '$timeout', '$http', '$firebaseArray', '$firebaseObject', function ($scope, $timeout, $http, $firebaseObject, $firebaseArray) {

$scope.selectUsers = 'Teilnehmer';

$scope.$on('modal', function (event, args) {

    var ref = firebase.database().ref("users");
    var teams = $firebaseObject(ref);

    teams.$loaded().then(function () {
       $scope.selectCount=0;
        $scope.teams = [];
        angular.forEach(teams, function (key) {
            $scope.teams.push({
                allUserTeamName: key.firstname,
                allUserTeam: key.team
            });

            $scope.selectMembers = function (key) {
                $scope.selectCount=$scope.selectCount+1;
                console.log(key);
            };

            $scope.createGameplanWithSelectedMembers = function () {
                console.log(teams);
            };

        });
    });
});
}]);