在ng-repeat中的2個不同的div上單擊2 ng不起作用

首先，對於可怕的標題感到抱歉。我可以在這裏解釋清楚。在ng-repeat中的2個不同的div上單擊2 ng不起作用

我有2個div在ng-repeat中，我想在2個不同的div上調用2個不同的函數，但由於某種原因，只有第二個div的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">$1 = {{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>

來源

2016-12-01 Rajesh Vishnani

發表您的控制器 – Sajeetharan

@Sajeetharan增加。請立即檢查。 –

我沒有看到任何問題 – Sajeetharan

這裏是工作示例

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">$1 = {{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>

來源

2016-12-01 11:44:36

我看到您的代碼正在運行，但我在代碼中找不到問題？你能檢查一下嗎？ –

我剛剛複製了您的代碼並添加了控制器功能。它的工作很好... –

添加z-index在HTML代碼中的屬性。這會讓你的分區前進。

這裏是做什麼：

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

來源

2016-12-01 12:13:09 Tchitchou

在ng-repeat中的2個不同的div上單擊2 ng不起作用

回答

相關問題