在 np-repeat 中使用 ng-click

Question

我正在尝试在 ng-repeat 中使用 ng-click 的情况下实现入围功能。

虽然 $index 在 ng-click 之外正确显示，但在所有情况下 $index 只是 JSON 数组中最后一个对象的索引html 是使用 ng-repeat 生成的。

我期待相应的 venue 或 venue.id 作为参数传递给 shortlistThis()。我猜这可能是与事件绑定有关的问题。

谁能帮我理解这里出了什么问题，如果可能的话，可能还有更好的方法。

我试过检查这个 Bind ng-model name and ng-click inside ng-repeat in angularjs 这里的 fiddle 工作正常，但我的不行。

更新：我在这里发现了一些有趣的东西。当候选列表按钮位于 ng-repeat 正下方时，它会按预期工作。但是，当嵌套在带有 ng-class 的 div 中时，它无法按预期工作。任何人都可以解释并建议解决这个问题吗？

//locationsapp.js var locationsApp = angular.module('locationsApp', []);


var venues = [{
  id: "Flknm",
  name: "ship",
}, {
  id: "lelp",
  name: "boat",
}, {
  id: "myp",
  name: "yacht",
}, ];

var shortlistedVenues = [];


var locationsApp = angular.module('locationsApp', ['ui.bootstrap']);



locationsApp.controller("getvenues", function($scope) {
  $scope.venues = venues;
  $scope.shortlistThis = function(venue) {
    console.log(venue);
    if (shortlistedVenues.indexOf(venue) == -1) {
      shortlistedVenues.push(venue);
      //alert('If');
    } else {
      console.log('already shortlisted')
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="locations" ng-app="locationsApp">
  <div ng-controller="getvenues">
    <div ng-repeat="venue in venues" ng-mouseover="" class="venue">
      <div ng-controller="manageInfo">
        <div class="row-fluid">
          <div class="control" ng-click="showInfo()">
          </div>
          <div class="maps" class="info">
            <div ng-class="class">
              <div class="close-info" ng-click="hideInfo()">
                <i class="fa fa-times">
                </i>
              </div>
              <div class="row full-venue-contents" ng-app="ui.bootstrap.demo">
                <div class="">
                  <div class="row-fluid myclass">
                    <div class="button-holder">
                      <div class="row-fluid">
                        <div class="col-md-4 col-xs-4 text-center btn-grid">
                          <button type="button" class="btn btn-default btn-lg btn-sup" ng-click="shortlistThis(venue)">
                            Shortlist{{$index}}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End of Full Info Container -->
              </div>
            </div>

          </div>
        </div>
        <div class="compare">
          <button type="button" class="btn btn-default btn-lg btn-sup">
            Compare ( {{shortlistedVenues.length}} )
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

问题出在你的按钮 div 上，它是 position: fixed，它实际上显示了第一个按钮，但点击它触发了最后一个按钮点击，我建议你应该建议你只渲染您选择的候选名单按钮。为此，您可以使用 ng-if 并渲染那些 index 与所选 $index

相同的按钮

HTML

<div ng-if="selected==$index" class="button-holder">
    <div class="row-fluid">
        <div class="col-md-4 col-xs-4 text-center btn-grid">
            <button type="button" class="btn btn-default btn-lg btn-sup" 
            ng-click="shortlistThis($parent.$index)">Shortlist{{$index}}</button>
        </div>
    </div>
</div>

& 然后把 ng-click="selected='$index'" 放在 ng-repeat div 上，就像

<div ng-repeat="venue in venues" class="venue" ng-click="selected=$index">

Working Fiddle

希望对您有所帮助，谢谢。

在 np-repeat 中使用 ng-click

Using ng-click inside np-repeat

angularjs

angularjs-scope

angularjs-ng-repeat

model-binding

angularjs-ng-click