在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}}¢/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>
答
这里是工作示例
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}}¢/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>
+0
我看到您的代码正在运行,但我在代码中找不到问题?你能检查一下吗? –
+0
我刚刚复制了您的代码并添加了控制器功能。它的工作很好... –
答
添加z-index
在HTML代码中的属性。这会让你的分区前进。
这里是做什么:
<div class="list-item-left" ng-click="DialCallfromHome(x);" style="z-index:1;">
发表您的控制器 – Sajeetharan
@Sajeetharan增加。请立即检查。 –
我没有看到任何问题 – Sajeetharan