2 ng-clicks 在 ng-repeat 中的 2 个不同的 div 上不起作用

Question

首先，对于可怕的标题感到抱歉。我可以在这里解释清楚。

我在 ng-repeat 中有 2 个 div，我想在 2 个不同的 div 上调用 2 个不同的函数，但由于某些原因只有第二个 div' s ng-click 有效，请看下面的代码。

var app = angular.module("myApp", []);
app.controller("ContactListController", getUserContacts);

function getUserContacts($scope) {
    $scope.contacts = [{
        'name': 'abc',
        'phone': '123',
        'call_rate': 50,
        'exchange_currency_name': 67
    }, {
        'name': 'xyz',
        'phone': '345',
        'call_rate': 20,
        'exchange_currency_name': 67
    }]

    $scope.setcontact = function(x) {
        alert("setContact");
    }
    $scope.DialCallfromHome = function(x) {
        alert("dial");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ons-list ng-app="myApp" ng-controller="ContactListController">
    <input type="search" ng-model="search" class="search-input" style="width:95%; margin: 6px auto 6px auto;" placeholder="Search">
    <div ng-show="loading" id="loadingDiv">
        <img src="images/loader-logo.png" alt="">
        <div id="loader"></div>
    </div>
    <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="x in contacts| filter:search">
        <div class="list-item-left" ng-click="DialCallfromHome(x);">
            <div class="initial">
                <img src="images/call-icon.png" style="width: 40px; margin: 5px;"></img>
            </div>
        </div>
        <div class="list-item-right" ng-click="setcontact(x);">
            <div class="list-item-content">
                <div class="name">{{x.name}}
                    <br />
                    <span class="number">{{x.phone}}</span>
                    <span class="lucent">Call for {{x.call_rate}}&cent;/min</span>
                </div>
                <span class="desc"> = {{x.exchange_rate}} {{x.exchange_currency_name}}</span>
            </div>
        </div>
    </ons-list-item>
    <br>
    <div ng-show="contacts.length == 0" style="width:95%; margin: 6px auto 6px auto;">No contacts added yet.</div>
</ons-list>

Answer 1

这是工作示例

var app = angular.module("myApp", []);
app.controller("ContactListController", getUserContacts);

function getUserContacts($scope) {

  $scope.contacts = [{
    'name': 'abc',
    'phone': '123',
    'call_rate': 50,
    'exchange_currency_name': 67
  }, {
    'name': 'xyz',
    'phone': '345',
    'call_rate': 20,
    'exchange_currency_name': 67
  }]

  $scope.DialCallfromHome = function(n) {
    alert("dial");
  }

  $scope.setcontact = function(n) {
    alert("setcontact");
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ons-list ng-app="myApp" ng-controller="ContactListController">
  <input type="search" ng-model="search" class="search-input" style="width:95%; margin: 6px auto 6px auto;" placeholder="Search">
  <div ng-show="loading" id="loadingDiv">
    <img src="images/loader-logo.png" alt="">
    <div id="loader"></div>
  </div>
  <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="x in contacts| filter:search">
    <div class="list-item-left" ng-click="DialCallfromHome(x);">
      <div class="initial">
        <img src="" alternate="Phone Icon" style="width: 40px; margin: 5px;"></img>
      </div>
    </div>
    <div class="list-item-right" ng-click="setcontact(x);">
      <div class="list-item-content">
        <div class="name">{{x.name}}
          <br />
          <span class="number">{{x.phone}}</span>
          <span class="lucent">Call for {{x.call_rate}}&cent;/min</span>
        </div>
        <span class="desc"> = {{x.exchange_rate}} {{x.exchange_currency_name}}</span>
      </div>
    </div>
  </ons-list-item>
  <br>
  <div ng-show="contacts.length == 0" style="width:95%; margin: 6px auto 6px auto;">No contacts added yet.</div>
</ons-list>

Answer 2

在您的 HTML 代码中添加 z-index 属性。这将使您的 div 领先。

这是要做的事情：

<div class="list-item-left" ng-click="DialCallfromHome(x);" style="z-index:1;">

2 ng-clicks 在 ng-repeat 中的 2 个不同的 div 上不起作用

2 ng-clicks on 2 different divs in ng-repeat does not work

javascript

angularjs

cordova

onsen-ui