How to bind a $scope variable with text editor in angularjs - javascript

This is my Editor input tag:
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" ng-model="TemplateDescription"></textarea>
When binding my $scope variable with ng-model then it returns undefined. and when I bind my $scope variable with ng-bind-html then still the same result. So then I gave an Id to this textarea and accessed the value inside of it by using this statement.
$scope.TemplateDescription = $sce.trustAsHtml($("#templateDescription").val());
I get the values as shown in the image below, so how can I get my required html text in my modal so that I can pass this value to save into database. Any kind of help will be appreciated.

If your TemplateDescription variable is containing raw HTML then you can try something like this.
First you need to set your raw HTML as trusted.
$scope.TemplateDescription = $sce.trustAsHtml($scope.TemplateDescription);
And then you need to bind TemplateDescription using ng-model
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" ng-model="TemplateDescription"></textarea>
I have tested it. It will work.

Related

Can I Get Online Value Using Javascript/angular?

I am new to javascript and angular so,i would appreciate your help, before I start plz have a look at below two pictures-
After some time there is a change-
Now some attributes in below HTML code has same attribute, -
<input type="text"
class="menuTitleField ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-required"
ng-model="title" placeholder="Option Name" elastic-input=""
ng-required="isRequired" focus-on="newChild" focus-if="canFocus"
tabindex="0" required="required" style="min-width: 0px; width: 48px;">
For example, there are canFocus or title, in HTML and in above picture, so how can I get the value of canFocus, title using java script based on class name or tag name or event.target.id?
I think these values come from the sever, how can I get values of those attribute?
Plz, ask in comment for clarification, also edit the post for more precise question. thanks.
so how can I get the value of canFocus using java script
Use either:
$rootScope.canFocus
or
$scope.$root.canFocus
To use $rootScope,$scope in your controllers, you need to import it then you can use variables to get values like
$scope.title
$scope.canFocus
if you want to use $rootScope just use this
$rootScope.title
$rootScope.canFocus
In your HTML
title,canFocus should work with your code
Angular has an angular way of doing almost everything. In this instance I would suggest researching property binding. For example with the placeholder property you can write:
<input [placeholder]="someVariable">
Then declare the someVariable in your component and what ever you set it to will be the placeholder and you can access it that way. The [] lets you set it to a variable in your component and will update the placeholder whenever you change it in your component. I would try experimenting with this to get an understanding for how it works.

ng-repeat angularjs conflicting whit ng-model

i am creating a web app in which i am using angularjs for database conectivity
here is my code
<div ng-repeat="x in sonvinrpm">
<input type="Text" ng-model="venuemobile" value="{{x.venuemobile}}" ng-init="venuemobile='{{venuemobile}}'"
</div>
<button ng-click="updfunction()">update</button>
on my page load my textbox fetching particular venuemobile from my database(1234567890) if i edit the venuemobile and press update the value of venuemobile should be updated
but i am facing the error
missing parameter: venuemobile
and i found out this error is appearing because i am using repeater,
when i remove repeater and enter into textbox manually then my database is updating properly,
previously i used ng-repeater for my dropdownlist and table(because there are multiple data not single data) in this case i need only one value from database, what should i use instead of ng-repeat
You do not have to call a function to update a $scope variable, since angular uses two way data binding by default, the updated value will be bound to scope. Anyway your HTML should be
<input type="Text" ng-model="venuemobile" value="{{venuemobile}}" ng-init="venuemobile='{{venuemobile}}'"
</div>

Getting typeahead to work in an Angular template?

I currently have a partial HTML that is being routed to, with a template and a custom Controller. The code snippet in my Angular template I would like to get working is:
<input type="text" typeahead=val for val in getValue($viewValue)>
However, it never enters into the function getValue(), while all other functions in my controller seem to be okay. When I take the typeahead out of the Angular template/partial, it seems to work. Why is this and how do I fix it?
You need to have an ng-model attribute to use the typeahead directive from AngularUI, even if you don't need to bind it to anything.
Change your markup to similar to the following:
<input type="text" ng-model="typeaheadVal" typeahead="val for val in getValue($viewValue)">

AngularJS with velocity

How to get the value of an html element using his id, withoud using ng-model
I try to get data to my page with velocity and i set this value to textarea, i take possiblity to user to modify the content of this element, for this i get well my data.
The problem is when user modify the contents of elements, how to get modification with angularjs
I try like this
<textarea class="form-control" id="description" rows="2" data="" ng-model="demand.description" placeholder="">
$demand.description
</textarea>
on the screen i dont seen the value of textarea
I have resolved the problem with this maner, its not very good, but that what i have now
$scope.validateModification = function(){
$scope.demand.description = $('#description').val();
alert ($scope.demand.description);
//after i sent the $scope.Demand to server
}
<textarea name="description" id="description">$demand.description</textarea>

Populate form field with javascript

I have a form with several fields populated by the user and before it is submitted some javascript gets called when a check button. It tries to set the value of the form fields to a variable that exists in the js function.
document.getElementById('var1').innerHTML = test;
alert(test);
I know the javascript is working as expected because I see the alert but the form boxes are not getting populated:
#helper.input(testForm("var1")) { (id,name,value,args) => <input type="text" name="#name" id="#id" #toHtmlArgs(args)> }
innerHTML is used to get/set the body of an html tag, so you're probably ending up with this in the html:
<input ...>test</input>
I think this may work for a <textarea>, but for your <input type="text"> you want to set the value attribute.
document.getElementById('var1').value = test;
If you want to programmatically set an html form field via JS there are many ways to do this and many libraries out there that make it really easy.
Such as various JS two-way component template binding libraries.
For instance, you can simply do the following:
HTML:
<div id="myapp">
<input id="var1"/>
<button>Submit</button>
</div>
JS:
mag.module('myapp',{
view : function(state){
var test= 'tester';
state.button= {
_onclick:function(){
state.var1=test
}
}
}
});
Here is working example of the above example:
http://jsbin.com/ciregogaso/edit?html,js,output
Hope that helps!

Categories

Resources