2

i want to get the text of div using angularjs . I have this code 

<div ng-click="update()" id="myform.value">Here </div>

where as my controller is something like this 

    var  myapp= angular.module("myapp",[]);
    myapp.controller("HelloController",function($scope,$http){

    $scope.myform ={};

    function update()
    {
            // If i have a textbox i can get its value from below alert 
            alert($scope.myform.value);
    }
    });

Can anyone also recommand me any good link for angularjs . I dont find angularjs reference as a learning source .

Improve this question
7
  • 1
    My question would be why do you want the content of the div? To do databinding you can use ng-bind, but since there is no "good" other way to change the content of the div with anything else than binding the value of the div is already on the scope. For learning check this out angular codeschool Commented Aug 29, 2014 at 8:54
  • Most likely you are trying to do something you should not do at all with Angular. Commented Aug 29, 2014 at 8:54
  • well i have like and dislike feature .So if user click on div it will change the text to 'unlike' and update the ng-click function too . So in this way everytime user click i have to change the text of the div Commented Aug 29, 2014 at 8:57
  • 1
    Yes but where is that value comming from should be comming from the angular model, like $scope.likeText = 'Like' and the function to be $scope.update = function() { $scope.likeText = 'dislike'; } and in the div you define an attribute ng-bind="likeText" Commented Aug 29, 2014 at 9:01
  • yes i am getting values through model and i am getting 1 and 0 from it . so if i am not wrong you are saying me that i use use angularjs variable there as text and just update the value of it right ? Commented Aug 29, 2014 at 9:04

3 Answers 3

Reset to default
4

You should send the click event in the function, your html code should be : 

<div ng-click="update($event)" id="myform.value">Here </div>

And your update function should have the event parameter which you'll get the div element from and then get the text from the element like this :

function update(event)
 {
  alert(event.target.innerHTML);
 }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

you should really not access the dom elements in in the controller use data binding to glue them together.
but in his case, if he want to get any DOM element info, he should use the DOM element in the controller to retrieve the text, where else can he do it?!
well, i have never seen the need to do anything like that, what could not be done by doing it the right data-binding way, if you do not have control over the html rendered there might be a setup where this is required. Normally only inside of a directive you should be touching html directly.
1

i just thought i put together a proper answer for everybody looking into this question later.

Whenever you do have the desire to change dom elements in angular you need to make a step back and think once more what exactly you want to achieve. Chances are you are doing something wring (unless you are in a link function there you should handle exactly that).

So where is the value comming, it should not come from the dom itself, it should be within your controller and brought into the dom with a ng-bind or {{ }} expression like:

<div>{{ likeText }}</div>

In the controller now you can change the text as needed by doing:

$scope.likeText = 'Like';
$scope.update = function() {
     $scope.likeText = 'dislike'; 
}

For angular tutorials there is a good resource here -> http://angular.codeschool.com/

Improve this answer

Comments

0

Redefine your function as 

$scope.update = function() {
 alert($scope.myform.value);
}

A better way to do it would be to use ng-model https://docs.angularjs.org/api/ng/directive/ngModel

Check the example, these docs can be a bit wordy

Improve this answer

7 Comments

alert is working but i am not getting the text of the div . I have use the ng-model too
Does an alert box pop up at all? could you create a fiddle?
alert does come but its blank
That means that $scope.myform.value is not defined, it will be if its bound correctly. did you replace the 'id' with ng-model? or bind? can you create a js fiddle or a code pen? else just paste your latest code
Your right the fiddle didnt do much. look at the example here: docs.angularjs.org/api/ng/directive/ngBind might help
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.