Getting clicked element id and using it in html using angularjs

Question

I am creating ionic app(ionic version v1) with angular js. I want to get the data of clicked element from one html file and use it in other html file.

app.js

angular.module('placementApp', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  // $ionicConfigProvider.views.transition('android'); //none, ios

  $stateProvider

    .state('home', {
      url: '/home',
      templateUrl: 'templates/main.html'
      // controller: 'AppCtrl'
    })

    .state('students', {
      url: '/students',
      templateUrl: 'templates/userList.html'
    })

    .state('companies', {
      url: '/companies',
      templateUrl: 'templates/companyList.html'
    })

    .state('editStudent', {
      url: '/editStudent',
      templateUrl: 'templates/editUser.html'
    });
});

userList.component.js

var app = angular.module('placementApp');

app.controller('userListCtrl', function($scope) {
    $scope.students = [
        {
            name: "Pearl Adam",
            Branch: "CE",
            id: "10562",
            cgpa: "5.9"

        },

        {
            name: "Avrill White",
            Branch: "CSE",
            id: "10821",
            cgpa: "8.3"
        }
    ]


    $scope.getClickedStudent = function(event) {
        $scope.v = event.currentTarget.attributes.data;
        console.log($scope.v);
    }

})

userList.html

<ion-view>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Student List</h1>
    </ion-header-bar>   
    <ion-content class="has-header">
        <div ng-controller='userListCtrl' ng-init='v = "undefined"'>
            <ul class="list" ng-repeat="x in students">
                <li class="item">
                    <a ng-click="getClickedStudent($event)" data='{{x}}' class="item" href='#/editStudent' >
                        <p>Name: {{x.name}}</p>
                        <p>Roll No.: {{x.id}}</p>
                    </a>
                </li>
            </ul>
            {{v.name}}

        </div>
    </ion-content>
</ion-view>

I need to get the data of clicked element and use it in editUser.html for eg. {{v.name}}, {{v.cgpa}}. but v is getting {} value.

I am using v in following file and it is showing empty value of {{v}} instead. editUser.html

<ion-view>
    <ion-header-bar class="bar-stable">
        <div ng-controller="userListCtrl">
            <h1 class="title">{{v.name}}</h1>
        </div>
    </ion-header-bar> 
    <ion-content class="has-header">
        <div ng-controller='userListCtrl'>
            <div class="list">
                <label class="item item-input">
                    <span class="input-label">Name</span>
                    {{v.name}}
                </label>
                <label class="item item-input">
                    <span class="input-label">Branch</span>
                    {{v.branch}}
                </label>
                <label class="item item-input">
                    <span class="input-label">Roll No.</span>
                    {{v.id}}
                </label>
                <label class="item item-input">
                    <span class="input-label">CGPA</span>
                    {{v.cgpa}}
                </label>

            </div>
        </div>
    </ion-content>
</ion-view>

Luciano Huguenin · Accepted Answer · 2017-06-04 15:03:17Z

1

Do this to get the data and the id:

<a href="#" id="12345" data-ng-click="ShowId($event)">   

$scope.ShowId = function(event)
{
   $scope.v = event.target.attributes['data'].value;
   $scope.yourWantedId = event.target.id;   
};

edited Jun 4, 2017 at 15:03

answered Jun 3, 2017 at 19:01

Luciano Huguenin

2211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anoop Kumar Over a year ago

I need to store the id in variable and use that variable in html file as shown in the question. I don't want to alert or console.log.

Luciano Huguenin Over a year ago

$scope.ShowId = function(event) { $scope.v = event.target.attributes['data'].value; $scope.yourWantedId = event.target.id; };

aseferov · Accepted Answer · 2017-06-03 15:59:39Z

0

Pass x object as parameter of function instead of $event

   <a ng-click="getClickedStudent(x)" class="item" href='#/editStudent' >


   $scope.getClickedStudent = function(student) {
        console.log(student);
    }

answered Jun 3, 2017 at 15:59

aseferov

6,4233 gold badges20 silver badges24 bronze badges

2 Comments

Anoop Kumar Over a year ago

I am doing $scope.v = student in the function but v is getting empty object, {} when used in another html file as {{v}}.

Anoop Kumar Over a year ago

I have added editUser.html in question where v is used.

Collectives™ on Stack Overflow

Getting clicked element id and using it in html using angularjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related