javascript - ng-repeat 内部的 angular ng-click 总是得到相同的对象

标签 javascript html angularjs ionic-framework

我有一个对象数组,我正在使用 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/

相关文章:

css - <h> 文本未在 <div> 内发布

javascript - 是否有检测 JavaScript 是否作为 WebWorker 执行的标准机制?

javascript - 在 AngularJS 中准备多选列表时如何选择多个选项

javascript - 在选择时为单选按钮分配唯一的 ID

javascript - 返回数据过滤器 onclick 可能吗?

javascript - HTML Javascript 输入字段是在单选按钮选中/单击时创建的

javascript - 引用错误: addPpl is not defined

javascript - Java .jar 中如何从 JavaScript 传递非字符串参数

javascript - JS 不用console.log()制作乘法表

javascript - 大约 2 分钟后,Webaudio 声音在 Chrome for Android 上停止