獲取點擊元素id並在html中使用angularjs

我正在創建具有角度js的離子應用程序（離子版本v1）。我想從一個html文件中獲取點擊元素的數據，並在其他html文件中使用它。獲取點擊元素id並在html中使用angularjs

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>

我需要點擊的元素的數據，並在editUser使用.html例如。 {{v.name}}，{{v.cgpa}}。但是v得到了{}的值。

我在下列文件中使用v，它顯示的是{{v}}的空值。 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>

來源

2017-06-03 Anoop Kumar

傳遞X對象的功能，而不是$事件

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


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

來源

2017-06-03 15:59:39 aseferov

我做'$函數中的scope.v = student'，但是v在獲得空對象{}時在另一個html文件中用作{{v}}。 –

我在使用'v'的地方添加了'editUser.html'。 –

這樣做是爲了獲取數據和參數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; 
};

來源

2017-06-03 19:01:20

我需要將id存儲在變量中，並在問題中顯示的HTML文件中使用該變量。我不想提醒或console.log。 –

$ scope.ShowId =函數（事件） { $ scope.v = event.target.attributes ['data'] .value; $ scope.yourWantedId = event.target.id; }; –

獲取點擊元素id並在html中使用angularjs

回答

相關問題