Develop Reference

Angularjs does not recognize "this"

I have a modal whose contents is generated by an JavaScript method (the reason being that the contents strongly depends on data retrieved from the DB, including hierarchy and its structure).
Initially, I had checkboxes deployed (as part of the generated HTML) as follows:
<input type="checkbox"
id="Chkbox_1"
onClick="Handle_Select(this,1,'Topic_34343')">
and, within the javascript (in Handle_Select) I could verify if the checkbox was checked or not by testing this.checked as follows:
Handle_Select = function (p_this,p_Topic_ID, p_Topic_Name) {
if(p_this.checked) {...}
}
Now, I replaced the onClick by ng-click (as stated, I'm using AngularJS) and suddenly this no longer holds the properties of the input element but what appears to be the contents of the controller. Of course, the same function now looks:
$scope.Handle_Select = function (p_this,p_Topic_ID, p_Topic_Name) {...}

It is better to use this syntax:
<input type="checkbox"
id="Chkbox_1"
ng-click="Handle_Select($event, 1, 'Topic_34343')">
Angular code will be:
$scope.Handle_Select = function ($event,p_Topic_ID, p_Topic_Name) {
var target = $event.target;
if (target.checked) {
// some code
}
}

Angular comes with some handy directives that abstract a lot of the typical javascript boilerplate code. In this case, consider using the ng-model and ng-checked directives. ngModel will bind your input element to a value defined on your scope, and ngChecked will check or uncheck the input depending on a property you define:
<input type="checkbox"
id="Chkbox_1"
ng-model="your_scope_data" ng-checked="your_scope_data.is_checked">
so define $scope.your_scope_data in your controller, and then angular will tie it together with your template so that the values stay in sync. your_scope_data.is_checked is an arbitrary property of the data you bound with ng-model to the input element. You can also evaluate a simple expression in ng-checked if you want to perform comparisons, etc. Hope this helps, and good luck!

How do I use form names in Angular to get input data?

In this tutorial by Jenkov, he asserts that you can give a form a name, and then access it in the controller by
$scope.FORM_NAME.INPUT_NAME
For example like
<form name="myFormNg" ng-submit="myForm.submitTheForm()" >
<input name="firstName" type="text" ng-model="myForm.firstName">
</form>
and then in Angular
$scope.myFormNg.firstName
However, when I try it, instead of getting what I typed into the input box (abc), I get this whole object:
{"$viewValue":"abc","$modelValue":"abc","$$rawModelValue":"abc","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":false,"$touched":true,"$pristine":false,"$dirty":true,"$valid":true,"$invalid":false,"$error":{},"$$success":{"parse":true,"required":true},"$name":"email","$options":null,"$$lastCommittedViewValue":"abc"}
Why? Is there a cleaner way to do it that Jenkov omits?

Actually, Jenkov mentions (and quite clearly) one thing: with $scope.formName.inputName you'll get an instance of ngModelController (and only if this input is already bound - with ng-model or in some other way).
This instance has many uses; you can get back its view value (via $viewValue property; see this demo), check whether or not it passes validation etc. - but it's still an Object, not a string.

Explanation asked about a Javascript / Angular line

In a factory I construct a HTML page. This page can contain a form, so I want to get a handle on the FormController. After some Googling I've got everything working with this line of code (html is all the html in a string in a jquery selector):
html.find("input").eq(0).controller('form');
I understand that:
find(): it is going to find all the input elements;
eq(): I suppose this will select the first found item of the find list;
controller(): this part is unclear. I find it hard to find some documentation about this. What I do know is that you can pass ngModel or form. When passing ngModel you get the FormController of the specified control, thus not the whole form. And when specifying form you get a reference to the whole form.
So, I understand the most of, but I still don't get if controller() is an Angular function or Jquery function and how/when you can use this method.

There is no concept of "controller" in jQuery: controller() is obviously an Angular function. Here is the documentation:
controller(name) - retrieves the controller of the current element or its parent. By default retrieves controller associated with the ngController directive. If name is provided as camelCase directive name, then the controller for this directive will be retrieved (e.g. 'ngModel').

controller() is a method added by Angular to the jQuery object. It returns the Angular controller associated with the element. See the docs including other extra methods here...
http://docs.angularjs.org/api/ng/function/angular.element

Angular isUnchanged - why doesn't this always work

I've seen this function used in several examples for form validation but can't find any info/docs/api for it and seems not to work in all cases. Is there an alternative for checking has the object changed ?

I have seen the method in AngularJS tutorials, and its just a custom function
$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.master);
};
The above check i believe is reference match not the complete content.
You can use $watch method to watch any change on object. Also go through FormController it has properties like $pristine, $isDirty etc which is specific to form editing. I believe these values are also available on form elements.

how to use jquery or javascript to get the selected VALUE from telerik radcombobox? val() not working

I have a listview that has a nested listview which contain radcomboboxes in the itemtemplate. As such, the IDs (as far as I know) are useless to me.
For example, if I have 30 items, each one of those items is going to generate a new combobox so the names are going to be generated by asp. What I need is to be able to grab the selected value from whichever combobox is being worked by the user. I'm currently using jQuery and some absurd parent().parent().children() type nonsense in order to find the correct combobox in relation to the submit button.
When submit button is clicked, I need it to find the selected value of the it's respective combobox so that I can send that to the post submission handler. The problem is that the .val() jQuery method is not working. When I use that with something like:
$(this).parent().parent().children().children(".statusCbo").val();
I end up getting the text value, not the selected value. I triple checked to make sure that I had the fields bound correctly in the aspx file;
DataTextField = '<%#Eval("name") %>' DataValueField = '<%#Eval("id") %>'
But as I said, I'm ending up with the DataTextField value of the selected item. The best explanation I could get was that it had something to do with how the control is requesting the content (via ajax).
So at any rate, could anyone offer some suggestions on how to accurately get the selected value from the combobox?
UPDATE:
I was able to gain reference to the object through a different means:
$(".submitTag").click(
function () {
var topLevel = $(this).closest(".CommentTopLevel");
var status = topLevel.find(".StatusTag").get_value();
//stub to test value
alert(status);
return false;
});
from here, if use status.val(), it will give me the text instead of the value (same issue as before). The documentation implies that I should use status.get_value(); but this is blowing up saying that the method is not supported from the object. Any ideas?
UPDATE:
nevermind, I found that it is a jquery object being returned, so the method isn't included. Continuing to dig.
SOLUTION:
There was just an extra step i needed to do to use traditional methods. I don't know what it took so long for it to click with me:
$(".submitTag").click(
function(){
var topLevel = $(this).closest(".CommentTopLevelTag"); //gets the parent container
var comboBoxID = topLevel.find(".StatusTag").attr("ID"); //gets the clientID of the jQuery object
var comboBoxRef = $find(comboBoxID); //finds the control by id and brings back a non-jQuery object (useable)
var comboBoxSelectedValue = comboBoxRef.get_value(); //uses the Telerik method to get the selected value
});

Its been a little while since I've dealt with Telerik controls, but what you're doing is bypassing the apis Telerik has made for you to use, and that strikes me as a very bad thing. The next release of Telerik Controls could easily break your code.
Look, it shouldn't be that hard to pass the client id from the listview. There's several methods I'd tackle but I'll let you figure that on your own for now. Once you DO have the ClientID for the control, follow the example on telerik's site:
http://demos.telerik.com/aspnet-ajax/combobox/examples/programming/addremovedisableitemsclientside/defaultcs.aspx
Once you have that id do some
var combo = $find(someVarReferencingTheId);
Now you have a reference to the combobox in its clientside form. Now find some function that gets what you want from here:
http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html
...
PROFIT!
EDIT: that first link to demos.telerik.com isn't really even needed, I just showed that because that's what I used to get that line of code (I could never remember if it's $get or $find I needed to use, unless I was doing a lot of Telerik clientside stuff at the time.).
EDIT 2: $get and $find are ASP.NET constructs, not Telerik's.