ng-repeat 内的角度 ng-click 总是得到相同的对象答案

【问题标题】：angular ng-click inside of ng-repeat always getting the same objectng-repeat 内的角度 ng-click 总是得到相同的对象
【发布时间】：2016-03-18 11:49:26
【问题描述】：

我有一个对象数组，我正在使用 ng-repeat 对其进行迭代，其中包含一个 ng-click，它从数组中发送对象并将其发送回支持控制器中的某个随机函数，如下所示：

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”按钮时，它都会单击第一个和实际单击的那个...它很快，但如果您观看它就可以看到它...

对不起，我已经尽我所能把它瘦下来了……

再次感谢..

【问题讨论】：

一个简单的演示插件？
提供控制器代码。
我创建了 pluker，一切正常plnkr.co/edit/qxen8t1kWoRRZzdzBsoT。请检查。
正如多人提到的那样，您所描述的内容无法通过您提供的代码重现。如果您可以创建一个最小的、完整的、可验证的行为示例，您将得到比“我复制了您的代码并且它工作正常”更好的答案。 stackoverflow.com/help/mcve
我明白。我会尝试将其缩小并在应用程序之外重现......这有点痛苦，但如果我需要帮助，我需要......感谢您的回复......

标签： javascript html angularjs ionic-framework

【解决方案1】：

我可以重现您的问题，因为我在自己的项目中挣扎了好几个小时。

您以正确的方式使用 Angular。但是，您的问题可能出在视图本身，因为您的元素位于“标签”HTML 元素内。

根据您使用的浏览器和您的 CSS 样式，标签中包含的元素内的点击会以不同的方式传播，有时会相互重叠。这应该是一个“可访问性功能”，使用户可以用手指点击以激活控件的更大区域。

我已经编辑了您的 plunker，只需删除“标签”元素即可解决问题。

【讨论】：

这是正确答案。问题是因为按钮位于标签内。它可以在 OP 的 plunkr 中重现。

【解决方案2】：

这里你传递了一个对象。但是你可以得到里面的全部属性你的点击事件。

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>

【讨论】：

【解决方案3】：

我只是复制你的代码就可以了。

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']);

代码插件http://embed.plnkr.co/rbcH47/preview

【讨论】：

你的回答是不是没有问题需要回答？
我想是的，但我只是向提问者确认，代码似乎没有错，也许他的 controllers.js 中的代码不正确。