AngularJS

Question

我有一个 bootstrap 模型，里面有 ng-repeat。它显示 JSON 数据。现在我想单击一个团队（团队名称）并将其显示在 console.log 中。但是，我的问题是我无法获得 teams.team（团队名称）...

你知道如何处理吗？

app.js

app.controller('modalController', ['$scope', '$timeout', '$http', function ($scope, $timeout, $http) {
   $scope.$on('modal', function (event, args) {
      $http.get('../data/teams.json').then(function (response) {
         var teams = response.data.teams;
         var teamsArray = [];
         for (var p  in  teams) {
              var d = teams[p];
              teamsArray.push(d);
         }
         $scope.teamSelected = function () {
              console.log("Clicked" + teams.team)
         };
         $scope.teams = teamsArray;
      });
   }) 
}]);

modal.html

<div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="team in teams | filter:team | limitTo: paginationLimit()" ng-click="teamSelected(teams.team)">
    <div class="row pad-team-selection-view">
         <button type="button" class="btn btn-default team-selection-view">
            <img ng-src="{{ team.logo }}" width="18" height="18" class="img-logo">{{ team.team }}
         </button>
    </div>
</div>

teams.json

{
  "teams": [
    {
      "id": "0",
      "league": "1. Bundesliga",
      "team": "FC Augsburg",
      "country": "Deutschland",
      "logo": "https://upload.wikimedia.org/wikipedia/de/b/b5/Logo_FC_Augsburg.svg"
    },

Answer 1

你的ng-click参数有误

替换

<div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="team in teams | filter:team | limitTo: paginationLimit()" ng-click="teamSelected(teams.team)">
   <div class="row pad-team-selection-view">
       <button type="button" class="btn btn-default team-selection-view">
          <img ng-src="{{ team.logo }}" width="18" height="18" class="img-logo">{{ team.team }}
       </button>
   </div>
</div>

和

<div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="team in teams | filter:team | limitTo: paginationLimit()" ng-click="teamSelected(team)">
    <div class="row pad-team-selection-view">
        <button type="button" class="btn btn-default team-selection-view">
           <img ng-src="{{ team.logo }}" width="18" height="18" class="img-logo">{{ team.team }}
        </button>
    </div>
</div>

你看到我们有 ng-click="teamSelected(team)" 并在控制器中替换下面的代码

$scope.teamSelected = function () {
    console.log("Clicked" + teams.team)
};

使用此代码

$scope.teamSelected = function (obj) {
    console.log("Clicked" + obj.team)
};

Answer 2

在 ng-repeat div 中传递 teams.team，实际上你已经有了 team 对象，所以你可以直接传递 team。另外，确保该团队是您的 teamSelected 函数的输入，如下所示：

HTML:

ng-click="teamSelected(team)"

JavaScript:

$scope.teamSelected = function (team) {
  console.log("Clicked" + team.team)
};

AngularJS - 获取 JSON 属性并显示它

AngularJS - Get JSON Attribute and display it

angularjs-ng-click