是否可以使用Angular獲取元素的內部HTML？

這裏是一個模擬演示http://play.ionic.io/app/580ebc698c2c。基本上我創建了一個填充了「名稱」的列表，我需要獲取所選元素的文本。是否可以使用Angular獲取元素的內部HTML？

但是，當我點擊列表中的一個項目時，所有用戶都會得到相同的「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); 
}

來源

2015-05-15 Isaac

你仍然面臨任何問題。我可以看到你不接受我的回答？ – CuriousMind

是的它適用於我的演示，但不適合我的實際項目。我得到一個「未定義」。 – Isaac

你能提供更多關於它現在失敗的細節嗎？ – CuriousMind

我看看你的代碼並意識到需要改變如下

HTML

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

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

下面是更正

錨標記有id，這是得到用數組中的每個元素重複，這是錯誤的。 ID在整個DOM中應該是唯一的。
您不需要訪問HTML元素即可獲取該值。在你的情況下，ng-click方法可以傳遞name對象的引用。
只需訪問JS功能中的name對象。

來源

2015-05-15 04:51:32 CuriousMind

在$指標作爲參數傳遞給你的點擊（）函數，如下所示：

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

然後使用索引在點擊確定這個名稱（指數）功能：

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

來源

2015-05-15 04:50:52

第一個問題，您設置了一個id userId，它對由angularJ創建的每個項目重複S.一個id必須是唯一的，這就是爲什麼你得到「Philip」，javascript發送id =「userId」代碼中第一個元素的innerHTML。

另外，如果你使用的角度，你能避免香草的JavaScript如的getElementById的東西，你可以在角點擊

HTML

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

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

傳遞參數「名」

Demo

來源

2015-05-15 04:51:01 Yoann

其中任何一個答案都可以。我只是建議你不要在同一個元素上綁定點擊和重複等。它導致了這種混亂。此外，您可能需要在中繼器中爲每個「名稱」（項）添加更多功能。

將中繼器推出指令。

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

然後該項目指導性模板：

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

而指令本身（即一個項目）響應它的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); 
       } 
      } 
     }; 
});

您的項目現在每個是很好的隔離，這是更好的佈局，它會更有意義什麼是必然的。

編輯：只需添加更多。您正在考慮獲取「DOM」，而不是思考「數據」的角度。 dom與Angular中的數據「綁定」並響應數據的變化（如果綁定正確！），並且在Angular中工作時總是試圖記住這一點。如果您在考慮有關DOM的任何內容，那麼您可能在曲目的反面。

來源

2015-05-15 05:07:05 KnowHowSolutions

是否可以使用Angular獲取元素的內部HTML？

回答

相關問題