Question

我有一个对象数组，我正在使用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”按钮，它会点击第一个和你实际点击的那个...它很快但是如果你看它就可以看到它......

对不起外部，我尽可能地减少它...

再次感谢..

Answer 1

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

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

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

我已经编辑了你的plunker，只是删除了＆＃34;标签＆＃34;元素解决了问题。

Answer 2

在这里传递一个物体。但是你可以在里面获得所有的属性你的点击事件。

＆＃13;

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);
    }
}

＆＃13;

<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>

＆＃13;

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

Code plunker http://embed.plnkr.co/rbcH47/preview

ng-repeat内部的角度ng-click始终获得相同的对象

3 个答案: