Question

这是一个虚拟演示http://play.ionic.io/app/580ebc698c2c。基本上我创建了一个填充“名称”的列表，我需要获取所选元素的文本。

然而，当我点击列表中的某个项目时，我会为所有用户获得相同的“innerHTML”。

我的方法是否可行？或者使用Angular有更好的方法吗？

由于

我的代码：

Index.html（正文）

 <body ng-app="app" ng-controller="MyCtrl">
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Awesome App</h1>
  </ion-header-bar>
  <ion-content>
    <div class="list">
      <a class="item" ng-repeat="name in names" id="userId" ng-click="click()">
        {{name.name}}
      </a>
    </div>

  </ion-content>
</ion-pane>

app.js

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

.controller('MyCtrl', function ($scope) {
  $scope.names = [
    {name: "Phillip"},
    {name: "Jane"},
    {name: "Marcos"},
    {name: "Thomas"}
  ]

  $scope.click = function () {
    var selectedUser = document.getElementById("userId").innerHTML;
    alert("You selected " + selectedUser);
  }

})

更新

我的数据实际外观如何。

<ion-content>
    <div class="list">
        <a class="item" 
            ng-repeat="friend in friends" 
            ng-click="selectedUser(friend)">
            {{friend._serverData.following}}
        </a>
    </div>
</ion-content>

形成此列表我试图在点击（选中）时以某种方式获取项目的“文本”。

我的JS

$scope.selectedUser = function (friend) {
    alert(friend.friend);
}

Answer 1

我查看了您的代码并意识到需要按照以下方式进行更改

<强> HTML

<a class="item" ng-repeat="name in names" ng-click="click(name)">
  {{name.name}}
</a>

<强> JS

$scope.click = function (name) {
    alert("You selected : " + name.name);
}

以下是更正

锚标记有id，这与数组中的每个元素重复，这是错误的。 ID应该在整个DOM中都是唯一的。
您无需访问HTML元素即可获取值。在您的情况下，ng-click方法可以传递name object。
只需访问JS函数内的name对象。

Answer 2

将$ index作为参数传递给click（）函数，如下所示：

<a class="item" ng-repeat="name in names" id="userId" ng-click="click($index)">
        {{name.name}}
</a>

然后使用索引确定click（索引）函数中的名称：

$scope.click = function (index) {
    var selectedUser = $scope.names[index].name;
    alert("You selected " + selectedUser);
}

Answer 3

第一个问题，你设置了一个id userId，它为angularJS创建的每个项目重复。 ID必须是唯一的，这就是为什么你得到＆＃34; Philip＆＃34;，javascript使用id =＆＃34; userId＆＃34;发送代码中第一个元素的innerHTML。

另外，如果你使用Angular，你可以避免像getElementByID那样的vanilla javascript，你可以传递参数＆＃34; name＆＃34;在角度点击

HTML

<div class="list">
          <a class="item" ng-repeat="name in names" id="userId" ng-click="click(name.name)">
            {{name.name}}
          </a>
        </div>

JS

 $scope.click = function (name) {
        alert("You selected " + name);
      }

Demo

Answer 4

上述任何一个答案都很好。我只是建议你不要在同一个元素上绑定点击和重复等。它导致了这种混乱。此外，您可能希望转发器中每个“名称”（项目）具有更多功能。

将转发器中的输出推送到指令中。

[{
    "name": "Month",
    "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
}, {
    "name": "Revenue",
    "data": [23987, 24784, 25899, 25569, 25897, 25668, 24114, 23899, 24987, 25111, 25899, 23221]
}, {
    "name": "Overhead",
    "data": [21990, 22365, 21987, 22369, 22558, 22987, 23521, 23003, 22756, 23112, 22987, 22897]
}]

然后是项目指令模板：

<ul>
  <li ng-repeat="item in items">
     <item-directive data="item" />
  </li>
</ul>

指令本身（对于那一项）响应它的点击事件。

 <div>
   <a ng-click="clickMe()">{{data.name}}</a>
 </div>

现在你的每件物品都被很好地隔离了，它的布局更好，更能让人感觉到什么。

编辑：只是添加一点。你正在考虑获得'DOM'，而不是Angular思考'数据'的方式。 dom与Angular中的数据“绑定”并响应数据中的更改（如果绑定正确！），当您在Angular中工作时，请始终尝试记住这一点。如果您正在考虑关于DOM的任何事情，那么您可能在轨道的错误方面。

是否可以使用Angular获取元素的内部HTML？

4 个答案: