如何在输入字段聚焦时获取特定对象?

时间:2017-08-31 11:04:30

标签: javascript angularjs angularjs-ng-repeat angular-ngmodel

目前我有一个对象列表(团队),我在ng-repeat中显示它们(在matchList中匹配)。所以它有8支球队和28场比赛。现在我在每个团队旁边都有一个输入字段,我想通过单击输入字段输入结果。那时我检查输入区域是否聚焦(ng-focus& ng-blur)。

我的问题是我需要从console.log中的对象获取teamname,以便接下来的步骤...

我该如何实现?

这是我的控制器:

app.controller('gametableController', ['currentAuth', '$scope', '$location', '$firebaseObject', '$firebaseArray', '$http', 'cfpLoadingBar', function (currentAuth, $scope, $location, $firebaseObject, $firebaseArray, $http, cfpLoadingBar) {

    var ref = firebase.database().ref("matches");
    var matchList = $firebaseObject(ref);

    matchList.$loaded().then(function () {

        cfpLoadingBar.start();

        $scope.matchList = [];

        angular.forEach(matchList, function (match) {

            var matchTeams = [];

            angular.forEach(match, function (team) {
                matchTeams.push(team)
            });

            $scope.focus = function () {
                console.log('focussed');
            };
            $scope.blur = function () {
                console.log('not focussed')
            };

            $scope.matchList.push(matchTeams);
        });

        console.log(matchList);

        cfpLoadingBar.complete();

    });

}]);

这是我的HTML:

<div class="container mrgn-bottom">
        <div class="row" ng-repeat="match in matchList">
            <div class="col-md-12 mrgn">

                <div class="match">

                    <div class="col-md-3 card-plan card-wrp">

                        <div class="col-md-3 player-team-logo"><img ng-src="{{match[1]}}" width="60" height="60" class="table-team-logo"></div>

                        <div class="col-md-9">
                            <div class="col-md-12 player-team-info info-team"><b>{{match[0]}}</b></div>
                            <div class="col-md-12 player-team-info info-user">{{match[3]}}</div>
                            <div class="col-md-12 player-team-info info-user">Siege: {{match[4]}}</div>
                        </div>
                    </div>

                    <div class="col-md-1 result-input-wrp card-plan-result">
                        <div class="quantity">
                            <input type="tel" ng-model="model" ng-focus="focus()" ng-blur="blur()" maxlength="2" min="1" max="9" step="1" ng-value="'{{ match[2] }}'" title="result">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="versus-text"><b>{{ versus }}</b></div>
                    </div>

                    <div class="col-md-1 result-input-wrp card-plan-result">
                        <div class="quantity">
                            <input type="tel" ng-model="model" ng-focus="focus()" ng-blur="blur()" maxlength="2" min="1" max="9" step="1" ng-value="'{{ match[9] }}'" title="result">
                        </div>
                    </div>

                    <div class="col-md-3 card-plan card-wrp">

                        <div class="col-md-3 player-team-logo"><img ng-src="{{match[6]}}" width="60" height="60" class="table-team-logo"></div>

                        <div class="col-md-9 ">
                            <div class="col-md-12 player-team-info info-team"><b>{{match[5]}}</b></div>
                            <div class="col-md-12 player-team-info info-user">{{match[8]}}</div>
                            <div class="col-md-12 player-team-info info-user">Siege: {{match[7]}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:0)

我不太明白你的最终目标,但也许你正在寻找这个:

<!-- pass your element into focus() handler.-->  
<div class="col-md-1 result-input-wrp card-plan-result">
    <div class="quantity">
        <input type="tel" ng-model="model" ng-focus="focus(match[9])" ng-blur="blur()" maxlength="2" min="1" max="9" step="1" ng-value="'{{ match[9] }}'" title="result">
    </div>
</div>
// and in scope
$scope.focus = function (matchedElement) {
    console.log('focused', matchedElement);
};

基于评论的快速更新

因为它们都使用相同的ng-model =“model” 给他们一个不同的名字......

e.g ng-model="team_1" and ng-model="team_2".

另请注意,ng-model和ng-value都设置并修改输入值