Simple question about binding model to form and then getting word count

[Andrew Greene]

I just started reading about Angular and I'm confused about model and data-binding.

I read the documentation here: http://docs.angularjs.org/api/ng.directive:ngController 

and was trying to add something like <h1>{{count}}</h1> where count would be the word count of the ng-model="name" in the form. I can't seem to get count to bind to the value of the model of the text field.

How might the code change if you had a model of a textarea but wanted to derive and add other attributes to the model as the user was typing in the textarea and then display those attributes in another div as the user typed?

I made a few changes here: http://jsfiddle.net/3haTd/3/ and http://jsfiddle.net/3haTd/5/

[Pawel Kozlowski]

Hi Andrew,

Here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/7Ha3L/1/

The problem you had was that you were using 'this' while you should be
using '$scope'. What angular can see in templates are objects in
$scope, while 'this' was referring to the controller instance.

Other thing: if you want the word count for name to be updated
dynamically you should use template binding: {{name.split('
').length}}

Also, I've cleaned up your jsFiddle a bit (jsFiddle has a built-in
support for angular now).

Hope this helps,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

[Andrew]

Hi Pawel,

Thanks so much for the quick reply.

I guess since count is a simple derived attribute, that it's okay to put in the html template, but if you wanted to calculate other more complex derived attributes from the model, then it's better to put it in the controller, right? 

When putting the logic in the controller: http://jsfiddle.net/7Ha3L/3/ it correctly calculates the count on load, but doesn't update dynamically. If I have complex logic that has to go in the controller and can't fit in template, then how do I get the count (or some other derived attribute) to update dynamically?

Thanks,

Andrew

[Andrew Greene]

And I'm thinking specifically of derive attributes that would require XHR requests. Thank you for the help.

--

[Pawel Kozlowski]

Hi!

If you want to keep this count-calculating logic in a controller, just
create a function (getCount()?) for this:
http://jsfiddle.net/pkozlowski_opensource/7Ha3L/4/

Otherwise there is always an option of watching expressions
(Scope.$watch): http://jsfiddle.net/pkozlowski_opensource/7Ha3L/5/

So, quite a number of possibilities :-)

Cheers,
Pawel