Let's go into the HTML and
where we want to bind the name, is into the input element.
So the way we do this binding is you remember from previous lecture,
is we do ng-model.
And we say that ng-model we want to bind to the name.
So as the name changes in this input box, the name in our scope,
in our $scope object will change as well.
And if we want, we could quickly verify that that's the case by just putting yet
another value right here.
Called name and now as we type right here
that value is going to show up beneath this total numeric value.
So let's go ahead and remove that.
So we need somehow someway to let our controller know every time a user presses
the key that we should go ahead and look at the model recalculate model meaning.
Our name recalculate the totalValue and go ahead and
output that totalValue right here simply by updating it on the scope.
So the way we could do that, and let's go ahead and make a couple of indents here.
The way we could do that is by saying, ng-keyup.
And we're going to bind something else on the scope.
And in this case, let's bind a function, which we haven't really written yet.
But let's call it displayNumeric.
And we'll go ahead and give it parentheses.
We could even give it a semicolon.
And when I save it, nothing's really going to happen,
since we haven't really defined this function yet.
So let's go ahead to our app.js and
define displayNumeric() on the scope so it's visible to our view as well,
displayNumeric, and that's going to be a function.
And the function is going to create a totalNameValue, and
we're going to get it somehow, don't know yet how, so let's just give it a 0.
And we'll just make a comment, get the total value.
And once we get that total value, we're going to go ahead and
update our scope variable, totalValue of a scope variable,
to our local variable, which is totalNameValue right here.
So the only thing that's left is to actually calculate it.
Let's go ahead and write a function that's going to do that for us.
Here we could write a regular function, and
we'll call it calculateNumericForString().
And we'll pass it a string, and here I'll go ahead and copy and
paste some of the code that I already pre written before.
And we'll go ahead and paste it right here and
all it's doing here is just saying I'm going to start with the zero,
I'm going to iterate over the string and every position in the string.
I'll figure out what the character code is, add that to the total value and
return that total value.
So at this point we're good right here and
all we need to do now is substitute the call, instead of the 0.
So we're going to call that function and
what we're going to pass to that function is our $scope.name.
Because that's what is going to get updated as I keep typing something
in here.
So once I get that, let's go ahead and take that comment out of here.
Once we calculate that numeric value,
it's going to get saved in the total name value variable.
And then, we're going to copy that right into the scope, which is going to
then update the scope and automatically update the total value in the view.
So let's go ahead and save that.
And right now if we start typing in here and let's put my name in here.
You see as I type or as I erase things the value is changing automatically.
So let's take a look at our code a little bit in the more design perspective.
So we have our app.js and as you can see, we never really reach
out into the view and try to figure out how the view's implemented.
There's no even any ID's in the view at all.
All we did was declaratively said that this input field
should be bound to the name on the scope to our view model, and
whenever there's an event meaning somebody presses the key or lets the key up.
It should call this function that is also bound to our view model
which is our controller and particularly the $scope.
This allows us quite a bit of flexibility on our view or in our HTML.
Is we could change this whole thing around however we want and
still have the functionality be completely untouched.
In other words, nothing in app.gs will ever have to change
no matter how you end up displaying that numeric value,
pf that name or how you even end up getting the name from the user.
The code in app.js will stay the same.