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

Question

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

但是，当我单击列表中的某个项目时，所有用户都得到相同的 "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>

形成此列表我试图以某种方式在单击（选中）时获取项目的 "text"。

我的 JS

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

Answer 1

将 $index 作为参数传递给您的 click() 函数，如下所示：

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

然后在click(index)函数中使用索引来确定名称：

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

Answer 2

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

此外，如果你使用Angular，你可以避免香草javascript比如getElementByID的东西，你可以在angular中传递参数"name"点击

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 3

我查看了您的代码，发现需要进行如下更改

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 对象的引用。
只需在JS函数中访问name对象。

Answer 4

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

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

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

然后是项目指令模板：

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

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

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);
                 }
            }
        };
});

现在您的每件物品都被很好地隔离了，布局也更好了，而且它们之间的绑定也更有意义。

编辑：只是为了添加更多。您正在考虑获得 'DOM'，而不是 Angular 思考 'data' 的方式。 dom 是 'bound' 到 Angular 中的数据，并响应数据的变化（如果绑定正确！），当你在 Angular 中工作时，请始终记住这一点.如果您对 DOM 有任何想法，那么您可能走错了路。

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

Is it possible to get the inner HTML of element using Angular?

javascript

angularjs

ionic-framework

ionic