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

Question

Here is a dummy demo http://play.ionic.io/app/580ebc698c2c . 这是一个虚拟演示http://play.ionic.io/app/580ebc698c2c 。 Basically I created a list filled with "names" and I need to get the text of the element that is selected. 基本上，我创建了一个填充有“名称”的列表，我需要获取所选元素的文本。

However when I click on an item from the list, I get the same "innerHTML" for all the users. 但是，当我单击列表中的项目时，所有用户都得到相同的“ innerHTML”。

Is my approach even possible? 我的方法可行吗？ or is there a better way to do it using Angular? 还是有更好的方法使用Angular做到这一点？

Thanks 谢谢

My Code: 我的代码：

Index.html (body) 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 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);
  }

})

Update 更新

How my data actually looks. 我的数据实际看起来如何。

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

Form this list Im trying to somehow get the "text" of an item when clicked (selected). 形成这个列表，我试图以某种方式在单击（选中）时获得项目的“文本”。

My JS 我的JS

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

Answer 1

I had a look at your code and realized that it need to be changed as follows 我查看了您的代码，意识到需要进行如下更改

HTML HTML

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

JS JS

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

Here are the corrections 这是更正

The anchor tag had id , which was getting repeated with every element in array and that is wrong. 锚标记具有id ，该id在数组中的每个元素中都重复出现，这是错误的。 ID should be unique across entire DOM. ID在整个DOM中应该是唯一的。
You dont need to have access to HTML elements to get the value. 您无需访问HTML元素即可获取该值。 In your case the ng-click method can pass the reference of name object. 在您的情况下，ng-click方法可以传递name对象的引用。
Simply access the name object inside JS function. 只需访问JS函数中的name对象。

Answer 2

Pass in $index as a parameter to your click() function, as follows: 将$ index作为参数传递给click（）函数，如下所示：

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

Then use the index to determine the name in the click(index) function: 然后使用索引来确定click（index）函数中的名称：

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

Answer 3

First problem, you set an id userId, which repeats for each items created by angularJS. 第一个问题，您设置了一个id userId，它对angularJS创建的每个项目重复。 An id must be unique, that's why you get "Philip", javascript send the innerHTML of the first element in the code with id="userId". id必须是唯一的，这就是为什么您得到“ Philip”的原因，javascript用id =“ userId”发送代码中第一个元素的innerHTML。

Also, if you use Angular, you can avoid vanilla javascript such as getElementByID stuff, you can pass the parameter "name" in the angular click 另外，如果使用Angular，则可以避免使用诸如getElementByID之类的原始javascript，可以在有角点击中传递参数“ name”

HTML HTML

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

JS JS

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

Demo 演示

Answer 4

Either of the answers are fine above. 以上任何一个答案都很好。 I'd just suggest that you don't bind a click and repeat, etc on the same element. 我只是建议您不要在同一元素上进行点击和重复等操作。 It leads to this kind of confusion. 这导致了这种混乱。 Also you'll probably want more functionality per "name" (item) in the repeater. 另外，您可能会希望中继器中每个“名称”（项目）具有更多功能。

Push the out from the repeater into a directive. 将转发器中的内容推送到指令中。

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

Then the item-directive template: 然后是项指令模板：

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

And the directive itself (for that one item) responds to it's click event. 指令本身（针对该项目）会响应其click事件。

angular('appName').directive('itemDirective',function(){
            return{
            restrict:'E',
            replace:true,
            templateUrl:'item.view.html',
            scope:{
                data:'='
            },
            controller:function($scope,$log){
                 $scope.clickMe=function(){
                    $log.debug('clicked!', $scope.data.name);
                 }
            }
        };
});

Now each of your items is nicely isolated, it's laid out better and it will make more sense what is bound to what. 现在，您的每个项目都被很好地隔离了，布局得更好，并且将什么绑定到什么变得更有意义。

Edit: Just to add a bit more. 编辑：仅添加更多。 You are thinking about getting 'DOM', not the Angular way of thinking about 'data'. 您正在考虑获取“ DOM”，而不是角度来考虑“数据”。 The dom is 'bound' to the data in Angular and responds to changes in the data (if bound correctly!) and when you are working in Angular always try to remember that. dom是“绑定”到Angular中的数据并响应数据中的更改（如果绑定正确！），当您在Angular中工作时，请务必记住这一点。 If you are thinking anything about DOM you are probably on the wrong side of the tracks. 如果您在考虑有关DOM的任何内容，那么您可能会走错了路。

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

问题描述

4 个解决方案

解决方案1
2 已采纳 2015-05-15 04:51:32

解决方案2
1 2015-05-15 04:50:52

解决方案3
1 2015-05-15 04:51:01

解决方案4
1 2015-05-15 05:07:05

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-05-15 04:51:32

解决方案2 1 2015-05-15 04:50:52

解决方案3 1 2015-05-15 04:51:01

解决方案4 1 2015-05-15 05:07:05

解决方案1
2 已采纳 2015-05-15 04:51:32

解决方案2
1 2015-05-15 04:50:52

解决方案3
1 2015-05-15 04:51:01

解决方案4
1 2015-05-15 05:07:05