CODEWITHSUNDEEP
javascriptangularjsionic-framework
Isaac
Isaac

Reputation: 217

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

Here is a dummy demo 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.

Is my approach even possible? or is there a better way to do it using Angular?

Thanks

My Code:

Index.html (body)

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

})

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

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

Upvotes: 2

Views: 10472

Answers (4)

KnowHowSolutions
KnowHowSolutions

Reputation: 680

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.

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'. 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. If you are thinking anything about DOM you are probably on the wrong side of the tracks.

Upvotes: 1

CuriousMind
CuriousMind

Reputation: 3173

I had a look at your code and realized that it need to be changed as follows

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

Here are the corrections

  1. The anchor tag had id, which was getting repeated with every element in array and that is wrong. ID should be unique across entire DOM.
  2. You dont need to have access to HTML elements to get the value. In your case the ng-click method can pass the reference of name object.
  3. Simply access the name object inside JS function.

Upvotes: 2

Yooz
Yooz

Reputation: 2518

First problem, you set an id userId, which repeats for each items created by 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".

Also, if you use Angular, you can avoid vanilla javascript such as getElementByID stuff, you can pass the parameter "name" in the angular click

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

Upvotes: 1

Jennifer Nelson
Jennifer Nelson

Reputation: 76

Pass in $index as a parameter to your click() function, as follows:

<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:

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

Upvotes: 1

Related Questions