Question

我尝试在ng-click内使用ng-repeat的情况下实施短名单功能。

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

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

有人可以帮助我了解这里出了什么问题，如果可能的话，可能是更好的方法。

我确实试过检查这个Bind ng-model name and ng-click inside ng-repeat in angularjs这里的小提琴效果很好但是，我没有。

更新：我在这里找到了一些有趣的东西。当短名单按钮放在ng-repeat下面时，它可以正常工作。但是，当嵌套在带有ng-class的div中时，它并没有按预期工作。任何人都可以解释并建议修复此问题吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: