Angular js get div element issue - javascript

I am trying to get a div element value by ng-click but it comes an alert undefined.
my html is
<div ng-model='myName'>this is my name</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>
script is
$scope.showName = function(){
var nameOne = $scope.myName;
alert(nameOne);
}
How to solve this issue. Thank you.

ngModel directive can't be used with plain div (unless the element is a custom form control), see https://docs.angularjs.org/api/ng/directive/ngModel
<div ng-init="myName = 'this is my name'">{{ myName }}</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>
Plunker here
Edit: using ngInit outside of ngRepeat is considered a bad practice, initialize scope vars in the controller
$scope.myName = 'this is my name';
$scope.showName = function() {
alert($scope.myName);
}

<div>{{myName}}</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>
script is
$scope.showName = function(){
var nameOne = $scope.myName;
alert(nameOne);
}

Actually ng-model should be use on inputs.
<input type="text" ng-model="myName">
This Will create a $scope.myName var and bind it to the input content.
If you intitialize the myName in your javascript and want it to be displayed in this div you should use this syntax :
JS
$scope.myName = "Ben";
HTML
<div>This is my name : {{myName}}</div>
In both case your button click will not show undefined unless you didn't initialize it before the click (on the 2nd exemple).
Hope it helped.

Related

Show/hide angular element by condition

I built a feature adding "and zombies" to book names of choice, using basic angular.
<input type="text" ng-model="bookname" onclick="zombies()">
<h1> {{bookname}} </h1>
I want the "and zombies" (and the text inserted in the input) to be displayed only when there's text inside the input.
I tries this for starts, just to call the angular using JS and it doesn't work.
<script>
function zombies() {
document.getElementsByTagName("h1").innerHTML = "{{}}" + "and zombies";
};
</script>
How do I display the text when there's text inside the input?
(please go easy on me, I'm studying alone and you all started as juniors)
You Just need to add the condition which checks the value of bookname and display the static content with your name.
Like this -
<input type="text" [(ngModel)]="bookname" (click)="zombies()">
<h1> {{bookname}} <span *ngIf='bookname'>and zombies</span> </h1>
You can use a condition here.
<input type="text" [(ngModel)]="bookname" onclick="zombies()">
<h1 *ngIf="bookname"> {{bookname}} and zombies</h1>
Or if you want to use javascript:
<input type="text" ng-model="bookname" onclick="zombies()">
<h1 id="txtheading"></h1>
function zombies() {
var heading_value = document.getElementById("txtheading").value;
document.getElementById("txtheading").innerHTML = heading_value + " and zombies";
};
Easiest Solution you don't need onclick function ng-model will work itself.
AngularJs:
<input type="text" ng-model="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>
Angular 2/4/5/6:
<input type="text" [(ngModel)]="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>

how to append element in datalist in form using javascript

when I am removing form tag then it is working but after adding form tag from HTML it is not working. following is the code on which I am trying and what is the reason it is not working
function abc() {
var i, ele, node, parent;
var num = document.getElementById("name").value;
//num=parseInt(num);
var parent = document.getElementById("listName");
var node = document.createTextNode(num);
var ele = document.createElement("option");
ele.append(node);
parent.appendChild(ele);
//alert(num);
//num++;
document.getElementById("name").value = "";
}
<form>
<input type="input" id="name" list="listName" />
<datalist id="listName"></datalist>
<input type="submit" onclick="abc()" />
</form>
Valuing the attribute type of the input element with the submit value means submit the form.
The button documentation states indeed :
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
You don't have any form, so the current page is considered as the actual form.
As you click on the button, the function associated to onclick() is first invoked.
It adds the option in the dataList but you will never see it because the form is submitted and so you come back to the initial state of the html page.
You don't want submit a form but having a button to bind a click event to a function.
So don't use the submit type but the button type for your input :
<input type="button" value="add option" onclick="abc()" />
that matches to your requirement :
button: The button has no default behavior. It can have client-side
scripts associated with the element's events, which are triggered when
the events occur.
As a side note, your function is more complex as required and introduces too many variables that may create side effects.
This is enough :
function abc() {
var nameElement = document.getElementById("name");
var newOptionElement = document.createElement("option");
newOptionElement.textContent = nameElement.value;
var listNameElement = document.getElementById("listName");
listNameElement.appendChild(newOptionElement);
nameElement.value = "";
}
<form>
<input type="input" id="name" list="listName" />
<datalist id="listName"></datalist>
<input type="button" onclick="abc()" />
</form>
Because you used button as submit type.
If you need client side manipulation then it should not be maintain the page state (means not submit).
In your case if you will use
<input type="button" onclick="abc()" />
in place
<input type="submit" onclick="abc()" />
so it will be solve your problem.
change the html to type=button
<input type="button" onclick="abc()"/>
this works for me :
html ->
<input type="text" class='form-control' list="city" >
<datalist id="city">
</datalist>
js and jq ->
$("#city").empty(); // first empty datalist
var options=[];
options[0] = new Option('landan');
options[1] = new Option('york');
options[2] = new Option('liverPool');
$("#city").append(options);

javascript add button with two input

I'm trying to write this in javascript without using jquery. It basically has two input field: author and quote, and on click should be added to the page.
I'm also trying to save it on the page in case I leave the page. The added quote disappears when i execute the method:
function radd() {
if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) {
$("#mid-wraper" ).append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>");
document.getElementById("q").value="";
document.getElementById("a").value="";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but" onClick="radd()">Add</button>
<label for="q">Add ur Quote!</label><input id="q" name="q" />
<label for="a">The author name</label><input id="a" name="a" />
Try this
function radd()
{
if((document.getElementById("q").value!="")&& (document.getElementById("a").value!=""))
document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>";
document.getElementById("q").value="";
document.getElementById("a").value="";
}
function add(){
//create a new elem
var el=document.createElement("p");
//you can assign id, class , etc
el.id="yourcustomid";
el.textContent="yourcontent";
//then add to the wrapper
var wrapper=document.getElementById("mid-wrapper");
wrapper.appendChild(el);
}
This code shows you how to create a new paragraph and add it to your wrapper js...
You could also do something like this; far more easier in my opinion. Simply create both inputs, but set their attributes to hidden. And using javascript, delete the "hidden" attribute.
<button id="but" onClick="radd()">Add</button>
<input id="q" hidden="hidden" >Add ur Quote!</input>
<input id="a" hidden="hidden">The author name</input>
The JS part:
function radd(){
document.getElementById("q").removeAttribute("hidden");
document.getElementById("a").removeAttribute("hidden");
}

$event not defined in ng-change on text input

I hope my issue is simple to solve, I can't access the value by ng-model because i have multiple of these boxes as they are rendered as part of a list of inputs in a form. I am trying to get the ID and text value of a text box with ng-change. heres my html:
<input type="text" class="other-box" ng-model="test" id="4" ng-change="otherBoxUpdate(this)"/>
(ng-model is required, which is why it's in there). Hers is my controller snippet:
$scope.otherBoxUpdate = function (obj, $event) {
console.log(obj)
console.log($event)
console.log($event.target)
}
obj seems to return a scope value, however from what i've read I need to access $event.target, however $event is not defined. What am i doing wrong?
ng-change not allow to pass $event as parameter.
ng-change="otherBoxUpdate(test)"
var myapp = angular.module('app', []);
myapp.controller('Ctrl', function ($scope) {
$scope.otherBoxUpdate = function (obj) {
console.log(obj);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl as vm">
<input type="text" class="other-box" ng-model="test" id="4" ng-change="otherBoxUpdate(4)"/>
</div>
If you only need to identify the input that was clicked, you can pass some other piece of identifying information to your handler. For example, we can pass the id:
<input type="text" class="other-box" ng-model="test" id="4" ng-change="otherBoxUpdate(4)"/>

Angular get form elements

I am trying to get element name and class from a form that is passed on to a function. How can i do that?
Html side.
<form name="test">
<div>
<input type="text" class="test1" name="test2"/>
</div>
<div>
<input type="text" class="test3" name="test4"/>
</div>
</form>
<div>
<input type="button" data-ng-click="save(test)" />
</div>
and Javascript side
$scope.save = function(form){
for(how many elements are there)
(get elements values)
}
how can I do that, can it even be done like that? My purpose is to change class and some other attributes when it's necessary.
You can access the form directly from $scope using its name, i.e. $scope.test, and the elements from the form, e.g. $scope.test.test2.
However, if you want to loop through the elements without having to know their individual names you can do something like:
angular.forEach($scope.test, function (element, name) {
if (!name.startsWith('$')) {
// element is a form element!
}
});
I'm relatively new to AngularJS, but I am going to make a solid attempt to answer to test my knowledge and hopefully help you.
So in your form, on each of your elements you should use a ng-model. For example, here is a form that may collect a users first and last name:
<form name="test">
<div>
<input type="text" class="test1" name="test2" data-ng-model="user.name/>
</div>
<div>
<input type="text" class="test3" name="test4" data-ng-model="user.last/>
</div>
</form>
<div>
<input type="button" data-ng-click="save(test)" />
</div>
This will allow you to access the data in your form through $scope.user.
Now for changing classes and attributes, I'm not sure what rules dictate a class/attribute change on your form, but you could use the ng-dirty class as a "flag" to watch for when the user makes a change. Some more information here as to what exactly you are trying to accomplish would be helpful.
A common piece of advice I've seen for angular.js is that, you should only do DOM manipulation in directives, so you should definitely consider doing it according to Anthony's answer, that is, using ng-model.
Go down below to see a way to do it more properly using directives.
But if you insist on doing it in the controller, here is a jsfidle that shows you how you can approach it:
http://jsfiddle.net/3BBbc/2/
HTML:
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<form id="test">
<div>
<input type="text" class="test1" name="test2" />
</div>
<div>
<input type="text" class="test3" name="test4" />
</div>
</form>
<div>
<input type="button" ng-click="save('test')" value="submit" />
</div>
</div>
</body>
JavaScript:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.save = function (formId) {
$('#' + formId).find('input').each(function (idx, input) {
// Do your DOM manipulation here
console.log($(input).val());
});
};
}
And here is the jsfiddle showing you how to do it with directives. It's a bit more complicated though...:
http://jsfiddle.net/3BBbc/5/
I am trying to get element name and class from a form that is passed on to a function. How can i do that?
Your pseudocode is on the right track:
$scope.save = function( formName ) {
angular.forEach( $scope[ formName ], function( field, fieldName ) {
// Ignore Angular properties; we only want form fields
if( fieldName[ 0 ] === '$' ) {
return;
}
// "fieldName" contains the name of the field
// Get the value
var fieldValue = field.$viewValue;
} );
}
My purpose is to change class and some other attributes when it's necessary.
To do that, you can get the field elements, with the Angular element wrapper:
// Get the field element, as an Angular element
var fieldElement = angular.element( document.querySelector( '[name="' + fieldName + '"]' ) );
You can then use various jqLite methods on these elements. For instance, to set the element's class (overwriting the existing class), you can use the attr method:
// Replace existing class with "new-class"
fieldElement.attr( 'class', 'new-class' );

Categories

Resources