Develop Reference

Read a field from js file in view.html file in Angular JS 1.6

Could sound simple to anyone who have used angular js 1.6. I am a beginner who needs to use ng-if tag on my view.html page to show hide a div based on a flag I receive from web api end in angular js 1.6.
The web api is developed using dot net framework and the frontend is using angular 1.6.
My tags are like:
<div class="form-group" ng-if="IsMyFlag == true">
<div class="col-sm-6">
<select class="form-control" ng-model="abcid" ng-options="xyz.SessionTypeId as xyz.SessionTypeName for xyz in xyzList" ng-disabled="IsFlgDisabled"></select>
</div>
</div>
Now here IsMyFlag is declared in the js file for the same view and it is also declared in the model at C# end.
Can someone help me out by telling how to read this IsMyFlag value in the if condition? Please?

I found the answer to this question, basically we need to set the property in the .js page if we want to use any property in the .view page in angularjs 1.6.
For setting the value, you need to assign it in .js file as
$scope.IsMyFlag = data.IsMyFlag;
where the data object contains the model value from the backend code/api code.
Thanks for your responses.

Reference ASP.NET TextBox Control in AngularJS by ID instead of Name

I have a legacy application that I'm trying to add some Angular form validation features for the client side to be a little nicer. It's a WebForms application and it's using Master Pages.
The issue I'm running into is when I try to validate the form I need to reference the control by it's name attribute which ASP.NET auto generates (even when ClientIDMode = Static). I can't change the control to not be server side.
Is there a way I can reference the control by it's ID instead of name in AngularJS?
My TextBox:
<asp:TextBox runat="server" data-ng-model="formObj.textValue" ID="txtTextBox" CssClass="form-control" ClientIDMode="Static" MaxLength="100" required />
The Angular code:
$scope.validateForm = function (myForm) {
if (myForm.txtTextBox.$invalid) {
return true;
}
return false;
};
It comes back as an error because .NET generates the name as
<input name="ctl00$Content$txtTextBox" maxlength="100" id="txtTextBox" class="form-control ng-pristine ng-untouched ng-binding ng-invalid ng-invalid-required ng-valid-maxlength" data-ng-model="formObj.textValue" required="">
I don't want to hard code the ctl00$Content$txtTextBox into the name because this could easily change if someone ever moved the control or changed the structure. Is there some way I can reference the control by it's ID value which is always the same? Or is there some other .NET / Angular magic I can use to get around this?
Any help is appreciated!

The approach is to get the element name by id and then use the name with [ ] notation for validation.
try something like below.
myForm[document.getElementById("txtTextBox").getAttribute("name")].$invalid
Here is the Plunker
https://plnkr.co/edit/WMQ4Fb579PUW9C5t3124

I have used angular on web forms and I think its best to not mix asp.net controls with angular. Is there a reason why you can just use input field?
But if you do have to use it, to fix your particular problem you can use ClientIDMode

How to handle AngularJs with asp.net webform?

I just implementing AngularJs on a website with is written in asp.net webforms.
I figure out when ng-Submit on button, the form is also making Post call.
How to stop form from submitting and let the angular do its work.
My sample code is as below.
<form id="form1" runat="server">
<div >
<input type="text" data-ng-model="enteredName" ng-model-instant/>
<button class="btn" value="add" data-ng-submit="addName()" >Add</button>
</div>
</form>
//Add Name function
$scope.addName = function () {
$scope.names.push($scope.enteredName);
$scope.enteredName = '';
};
Note: The ng-submit controller is working fine it is adding the input to the string list but after that form makes post call. and page go to IsPostBack.
Anyone guide me to handle the form from not posting.

If you plan on making an angular form using .NET you should probably use .NET MVC instead of .NET webforms. The reason is that all webforms pages have their own <form> element that is used to maintain state. This can be seen when you make a new webforms page in Visual studio, it automatically adds:
<form runat="server" ID="Form1">
Additionally, when you make webforms controls like <asp:LinkButton> or other things that provide "enhanced" functionality from base HTML, they actually get rendered as <input> tags that use the parent form. Therefore, to take advantage of any of the features of webforms, you really need to stick to their model and it gets very difficult to add anything else on top of that. It's possible, and sometimes quite easy, but it's a very long learning curve to figure out all of the gotchas along the way.
Conversely, .NET MVC gives you less out of the box, exposing the raw HTML to you with very few wrappers and things like postbacks or viewstates. I think that's a much better host for something that is using angular, especially if you are using angular for forms, which will prevent you from using some of .NET's webforms functionality anyways.

I'd start by using ng-click instead of ng-submit. And i would also stay clear of asp.net controls on pages that use angular.

Why does't work html input type: range control in asp.net

Why does't work HTML input type: range control in asp.net? Have you any solutions for this problem?
In HTML code-
<input id="rangeCtrl" type="range" min="0" max="100" step="5" value="50" />
But is not work in ASP.NET

in ASP.net we need to use the HTML5 Doctype then only it work properly

This is by necessity a guess as you do not describe the problem you are experiencing, but it is noticeable that you have not provided a "name" attribute in your code -
From Mozilla Developer Network-
name
The name of the control, which is submitted with the form data.
When the form is POSTed (submitted) to your server then the value will be sent keyed against this name and not the id as you might have assumed.
If the issue is that you cannot see the value selected by the user on the server, then you will need to change your code to-
<input id="rangeCtrl" name="rangeCtrl" type="range" min="0" max="100" step="5" value="50" />
Assuming you are using Web Forms (as opposed to Web Pages or MVC, you've not specified) then you can then access the data using the Request.Form object in your codebehind. In MVC the value will automatically be matched against a view model property of the same name.

Fill server DropDown with javascript

Is it possible to add drop down items throught javascript, and then get it on server side?
I have
<asp:DropDownList ID="testDropDown" CssClass="listClass" runat="server"/>
<asp:Button ID="saveButton" runat="server" Text="Добавить" OnClick="saveButtonClick" />
After page load javascript add items to drop down
$('.listClass').append("<option value='value1'>Text1</option>");
But after saveButton click i have empty drop down on server

Any dynamic changes that happen on the client-side will not be automatically replicated on the server side.
You need to record the fact the action took place somehow (using, for instance an <asp:HiddenField> control)... then on the post-back, check for whether the action happened and replicate the value that took place on the client.
Also, be careful, as ASP.NET will probably throw an exception due to the fact that control is returning a value that ASP.NET did not populate the control with in the first place. To counteract this, either set the EnableEventValidation="false" in your <#Page> declaration, or add all possible values using Page.ClientScript.RegisterForEventValidation

You cannot do this in ASP.NET because the values are contructed using the ViewState on the server side.
Check this. It may be helpful for you: Options added to <select> by javascript lost in postback