Можно ли получить внутренний HTML-элемент с помощью Angular?

Предлагается демонстрационная версия http://play.ionic.io/app/580ebc698c2c. В основном я создал список, заполненный «именами», и мне нужно получить текст выбранного элемента.Можно ли получить внутренний HTML-элемент с помощью Angular?

Однако, когда я нажимаю на элемент из списка, я получаю тот же «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>

Форма этот список Im пытается каким-то образом получить «текст» из пункта при нажатии (выборочно).

Мой 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, который получил ting повторяется с каждым элементом в массиве, и это неправильно. ID должен быть уникальным для всей DOM.
Вам не нужно иметь доступ к элементам HTML, чтобы получить значение. В вашем случае метод ng-click может передать ссылку на объект name.
Просто войдите в объект name внутри функции JS.

источник

2015-05-15 04:51:32 CuriousMind

Pass в $ индекса в качестве параметра вашей функции нажмите() следующим образом:

<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

В первую очередь вы устанавливаете идентификатор пользователя, который повторяется для каждого элемента, созданного угловымJ С. Идентификатор должен быть уникальным, поэтому вы получаете «Philip», javascript отправляет innerHTML первого элемента в код с id = «userId».

Кроме того, если вы используете Угловое, вы можете избежать ваниль 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>

И сама директива (для этого один элемент) реагирует на это событие нажмите.

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

Можно ли получить внутренний HTML-элемент с помощью Angular?

ответ

Смежные вопросы