我有一个对象数组,我正在使用 ng-repeat 对其进行迭代,其中有一个 ng-click,它从数组发送对象并将其发送回支持 Controller 中的某个随机函数,就像这样:
PLUNKERR:http://plnkr.co/edit/Chvx59rRhGFwX2ImHQva
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Profile Screen</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
<link href="http://code.ionicframework.com/1.0.0-rc.1/css/ionic.min.css" rel="stylesheet">
<link href="http://code.ionicframework.com/1.0.0-rc.1/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-rc.1/js/ionic.bundle.js" ></script>
<script src="http://code.ionicframework.com/1.0.0-rc.1/js/angular-ui/angular-ui-router.js" ></script>
<script>
angular.module('controllers', []);
angular.module('application', ['ionic', 'controllers','ui.router'])
.controller('ProfileCtrl',function($scope,$ionicModal) {
$scope.editMode = false;
$scope.person = { aliases : [] };
$scope.person.aliases.push({ firstName: 'Dave', lastName: 'Smith'});
$scope.person.aliases.push({ firstName: 'Davey', lastName: 'Smith'});
$scope.person.aliases.push({ firstName: 'David', lastName: 'Smith'});
$scope.startStopEditProfile = function(status){
$scope.editMode = status;
}
$scope.deleteEntry = function(type,entity) {
console.log(type,entity);
alert("deleting "+ entity.firstName);
}
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('profile',{
url: "/profile",
templateUrl: "profile.html",
controller: "ProfileCtrl",
})
$urlRouterProvider.otherwise('/profile');
});
</script>
<script type="text/ng-template" id="profile.html">
<ion-view>
<div class="bar bar-header">
<div class="h1 title">My Profile</div>
<button class="button button-stable asdf-done-button" ng-click="editMode = !editMode">{{editMode ? 'Done' : 'Edit'}}</button>
</div>
<ion-content style="background: #EBEBEB" class="has-header" has-bouncing="true">
<div id="profileSection">
<ion-item ng-class="editMode ? 'asdf-profile-row-edit' : 'asdf-profile-row-view'">
<div class="asdf-table-row-right">
<label>
<div ng-if="editMode" ng-repeat="alias in person.aliases track by $index">
<span>
{{$index}} - {{alias.firstName + ' ' + alias.lastName}}
<button ng-click="deleteEntry('alias',alias)" >X</button>
</span>
</div>
<p ng-if="!editMode" ng-repeat="alias in person.aliases">
{{alias.firstName + ' ' + alias.lastName}}
</p>
</label>
</div>
</ion-item>
</div>
</ion-content>
</ion-view>
</script>
</head>
<body ng-app="application">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
点击右上角的编辑, “X”出现在名字旁边。 每次您单击任何“X”按钮时,它都会单击第一个按钮和您实际单击的那个...它很快,但如果您观看它,您会看到它...
对于外部因素,我感到很抱歉,我已尽我所能将其精简...
再次感谢..
最佳答案
我可以重现您的问题,因为我在自己的一个项目中为此苦苦挣扎了几个小时。
您正在以正确的方式使用 Angular。但是,您的问题可能出在 View 本身,因为您的元素位于“label”HTML 元素内。
根据您使用的浏览器和您的 CSS 样式,标签中包含的元素内的点击会以不同方式传播,有时会相互重叠。这应该是一个“辅助功能”,使用户可以用手指点击以激活控件的区域更广。
我已经编辑了您的 plunker,只需删除“标签”元素即可解决问题。
关于javascript - ng-repeat 内部的 angular ng-click 总是得到相同的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29114678/