Determine ng-repeat item when clicked

Question

Hi Im new in ionic im using the the ng-repeat of the angular.. and I was wondering how to get the name or id when the item of ng-repeat is clicked.. Im using sqlite to get all data.

   function UserCtrl($scope, $cordovaSQLite, $location, $state, $cordovaDialogs, $cordovaPreferences) {
        var vm = this;

        $scope.data = {};
        $scope.selection = {catagory : null};
        var query = "SELECT * FROM listpeople";
        $cordovaSQLite.execute(db, query, [])
            .then(function(res) {
                if (res.rows.length > 0) {

                    var userName = _.map(res.rows, 'name');
                    vm.names = userName;

                    console.log(userName)


                } else {
                    console.log("No results found");
                    console.log(res);
                }
            }, function(err) {
                console.error(err);
            });

}

my html

<ion-view title="Users" ng-controller="UserCtrl as vm">
    <ion-content class="has-header padding">
        <div class="list">
            <div class="item item-icon-right" ng-repeat="users in vm.names track by $index">
                {{users}}
                <i class="icon ion-edit" ng-click = "vm.edit()"></i>
            </div>
        </div>
    </ion-content>
</ion-view>

This might help http://stackoverflow.com/questions/31955930/how-to-retrieve-the-clicked-elementid-in-angularjs — Salman Javed, Apr 21 '17 at 06:05

score 2 · Accepted Answer · edited Apr 21 '17 at 08:27

2

just pass users as a parameter of the function

 <i class="icon ion-edit" ng-click = "vm.edit(users)"></i>

controller:

vm.edit = function(users){
    console.log(users)
}

edited Apr 21 '17 at 08:27

Upalr

2,140
2
23
33

answered Apr 21 '17 at 05:58

Sachila Ranawaka

39,756
7
56
80

score 1 · Answer 2 · answered Apr 21 '17 at 06:14

You can:

Pass that particular item from HTML

HTML:

<div class="item item-icon-right" ng-repeat="users in vm.names track by $index">
     {{users}}
     <i class="icon ion-edit" ng-click = "vm.edit(users)"></i>
</div>

JS:

function UserCtrl($scope, $cordovaSQLite, $location, $state, $cordovaDialogs, $cordovaPreferences) {
            var vm = this;
            var vm.edit = function(item){
                //update your item here
            }
            $scope.data = {};
            $scope.selection = {catagory : null};
            var query = "SELECT * FROM listpeople";
            $cordovaSQLite.execute(db, query, [])
                .then(function(res) {
                    if (res.rows.length > 0) {

                        var userName = _.map(res.rows, 'name');
                        vm.names = userName;

                        console.log(userName)


                    } else {
                        console.log("No results found");
                        console.log(res);
                    }
                }, function(err) {
                    console.error(err);
                });

}

Pass the index of that item $index from HTML

HTML:

<div class="item item-icon-right" ng-repeat="users in vm.names track by $index">
     {{users}}
     <i class="icon ion-edit" ng-click = "vm.edit($index)"></i>
</div>

JS:

function UserCtrl($scope, $cordovaSQLite, $location, $state, $cordovaDialogs, $cordovaPreferences) {
            var vm = this;
            var vm.edit = function(index){
               var itemToUpdate = vm.names[index];
               //update your item here
            }
            $scope.data = {};
            $scope.selection = {catagory : null};
            var query = "SELECT * FROM listpeople";
            $cordovaSQLite.execute(db, query, [])
                .then(function(res) {
                    if (res.rows.length > 0) {

                        var userName = _.map(res.rows, 'name');
                        vm.names = userName;

                        console.log(userName)


                    } else {
                        console.log("No results found");
                        console.log(res);
                    }
                }, function(err) {
                    console.error(err);
                });

}

In both the cases your vm.names array will have the updated value, after this edit click

Determine ng-repeat item when clicked

2 Answers2