使用 angularjs 获取单击的元素 id 并在 html 中使用它答案

【问题标题】：Getting clicked element id and using it in html using angularjs使用 angularjs 获取单击的元素 id 并在 html 中使用它
【发布时间】：2017-06-04 23:03:17
【问题描述】：

我正在使用 Angular js 创建离子应用程序（离子版本 v1）。我想从一个 html 文件中获取点击元素的数据并在其他 html 文件中使用。

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}} 的空值。编辑用户.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>

【问题讨论】：

标签： angularjs html ionic-framework

【解决方案1】：

执行此操作以获取数据和 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;   
};

【讨论】：

我需要将 id 存储在变量中并在 html 文件中使用该变量，如问题所示。我不想提醒或 console.log。
$scope.ShowId = function(event) { $scope.v = event.target.attributes['data'].value; $scope.yourWantedId = event.target.id; };

【解决方案2】：

将 x 对象作为函数的参数而不是 $event 传递

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


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

【讨论】：

我在函数中执行$scope.v = student 但 v 得到空对象，{} 在另一个 html 文件中用作 {{v}} 时。
我在v 的使用位置添加了editUser.html。