Question

我在$ scope.bet中获取输入类型编号的当前值时遇到问题 - 它始终未定义。

是否因为括号表示法？我是否应该利用ng-repeat数据（item.MatchId）来识别输入，还是有其他方法可以做到这一点？

<div ng-controller="FixturesCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Home</th>
                <th colspan="2">Resul</th>
                <th>Away</th>
                <th>Bet</th>
            </tr>
        </thead>
        <tbody class="fixtures">
            <tr ng-repeat="item in fixturesData">
                <td>
                    {{ item.Home }}
                </td>
                <td>
                    <input type="number" ng-model="homeGoals[item.MatchId]" ng-disabled="isDisabled{{item.MatchId}}"  id="homeGoals" class="form-control" min="0" max="99" />
                </td>
                <td>
                    <input type="number" ng-model="awayGoals[item.MatchId]" ng-disabled="isDisabled{{item.MatchId}}" id="awayGoals" class="form-control" min="0" max="99" />
                </td>
                <td>
                    {{ item.Away }}
                </td>
                <td>
                    <button ng-disabled="isDisabled{{item.MatchId}}" class="btn btn-default disableButton" ng-click="bet(item.MatchId)">Bet</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
app.controller('FixturesCtrl', function ($scope, FixturesService) {

    var requestFixtures = (function () {
        $scope.loader = true;
        FixturesService.getFixtures()
            .success(function (data) {
                $scope.fixturesData = JSON.parse(data);
            })
            .error(function (error) {
                $scope.fixturesData = "Unable to load the data: " + error.message;
            }).finally(function () {
                $scope.loader = false;
            });
    })();

    $scope.bet = function (MatchId) {
        var buttonName = "isDisabled" + MatchId;
        var awayGoalsModel = "awayGoals" + MatchId;
        var homeGoalsModel = "homeGoals" + MatchId;

        if (parseInt($scope[awayGoalsModel], 10) > 0 && parseInt($scope[awayGoalsModel], 10) >0)
        {
            $scope[buttonName] = true;
            alert($scope[homeGoalsModel] + ", " + $scope[awayGoalsModel]);
        }
    };

});

app.factory('FixturesService', ['$http', function ($http) {
    var FixturesService = {};
    FixturesService.getFixtures = function () {
        return $http.get('/Fixtures/GetFixtures');
    };
    return FixturesService;
}]);

$(document).ready(function () {
    $('.disableButton').click(function () {
        $(this).prop('disabled', true);
    });
});
</script>

Answer 1

看起来您正在直接从$ scope对象访问，这就是原因。括号没有问题。根据您的HTML，您应该通过撰写$scope.homeGoals[MatchId]来获取您的模型。

<强> HTML

<div ng-controller="MyCtrl">
    <div ng-repeat="match in matches">
      <input type="number" ng-model="homeGoals[match.id]" />
    <input type="button" ng-click="check(match.id)" value="check" />  
  </div>
</div>

<强> JS

function MyCtrl($scope) {
    $scope.homeGoals = {"0154":5,"0155":6};
    $scope.matches = [{id:"0154"},{id:"0155"}];

    $scope.check = function(id) {
      alert($scope.homeGoals[id]);
    }
}

请参阅Demo

ng-model括号表示法获取输入值

1 个答案: