有角度的ng点击ng的内部重复总是得到相同的对象

angular ng-click inside of ng-repeat always getting the same object

本文关键字：ng 对象 点击 内部      更新时间：2023-09-26

我有一个对象数组，我用一个ng重复来迭代它，其中是一个ng点击，它从数组中发送对象，并将其发送回后台控制器中的某个随机函数，如下所示：

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的方式是正确的。然而，您的问题可能在于视图本身，因为您的元素位于"标签"HTML元素内部。

根据您使用的浏览器和CSS样式，标签中包含的元素内部的单击将以不同的方式传播，有时会相互重叠。这被认为是一个"可访问性功能"，用户可以用手指敲击更宽的区域来激活控件。

我已经编辑了你的plunker，只需删除"标签"元素就可以解决问题。

这里您正在传递一个对象。但你可以把所有的东西都放进去您的点击事件。

angular.module('MyApp',[]);
function PostCtrl($scope) {
    $scope.objectArray = [
   {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
    
    ];
    $scope.onClick = function(obj){
       console.log(obj);
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="PostCtrl">
<table>
    <thead>
      <tr><th colspan="2">Title</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="obj in objectArray">
        <td>{{$index + 1}}</td>
        <td ng-click="onClick(obj)">
          {{obj.name}}
        </td>
      </tr>
    </tbody>
  </table>
    </div>
    </div>

我只是复制你的代码，它就可以工作了。

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src='controllers.js'></script>
    <script src='app.js'></script>
  </head>
  <body ng-app="App" ng-controller="Controller">
  <table>
    <thead>
      <tr><th colspan="2">Title</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="obj in objectArray">
        <td>{{$index + 1}}</td>
        <td ng-click="onClick(obj)">
          {{obj.name}}
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

controllers.js

angular.module('App.controllers', [])
.controller('Controller', function($scope) {
    $scope.objectArray = [
        {'name':'apple'},
        {'name':'orange'},
        {'name':'pear'},
        {'name':'naartjie'}
         ];
    $scope.onClick = function(obj){
        console.log(obj);
    };
})

app.js

angular.module('App', ['App.controllers']);

代码plunkerhttp://embed.plnkr.co/rbcH47/preview

相关文章：