AngularJS / AngularFire - 使用ng-click传递对象

时间:2017-08-18 09:40:24

标签: javascript angularjs firebase angularfire

我有一个模态(bootstrap),我从Firebase数据库加载对象。现在我添加了一个ng-Click to"选择"一个东西。

我想选择8个对象和"收集"他们。收集这8个对象后,我想将它们传递给另一个ng-Click。当我点击第二个ng-Click时,这8个(选中)对象被推送到数据库。

你知道如何存档吗?谢谢!

这是我的模式:

 <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>

这是我的控制器:

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);
            };

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

1 个答案:

答案 0 :(得分:2)

在视图中使用ng-disabled并使用所选长度作为禁用按钮的条件。

 <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>

在控制器中保留所选项$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);
            };

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