I want to display the value in the input text field using ng-bind directive.Can someone help me with this?
<div class="col-md-3">
<input class="form-control" disabled="disabled" value="ng-bind="type"">
</div>
Controller:
$scope.type = $scope.name[0].type_of_request;
I am trying to print this type in html page.I am not able to achieve that.Would someone help
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $timeout) {
$scope.type = "test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
ng-model works to be fine here, use it:
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
Or Use ng-value="type"
Check the below example:
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>Hi <input type="text" value="{{name}}" /></p>
<p>Ahoy <input type="text" ng-value="name" /></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Use ng-model instead
If you need one way binding then
<input class="form-control" disabled="disabled" ng-model="::type">
else if you need two way binding
<input class="form-control" disabled="disabled" ng-model="type">
Related
I have to show the a new quote in the input box. The input box is too small.
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<input name="text" id="quote" type="text" value="" multiple="multiple">
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<textarea name="text" id="quote" type="text" value="" cols="5" rows="5">your quote is here</textarea>
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
Please use textarea instead of the input type text. This is the good practice
For an input that allows a person to type multiple lines, use <textarea>. You can also define the cols and rows the textarea can have, basically creating new lines at that point
Option 1:
$("document").ready(function(){
$("#getquotebtn").click(function(){
setInput("hello world ") //
})
})
function setInput(val){
//alert()
$("#quote").val(val)
$("#quote").css("width", (val.length * 6) +"px"); //dynamically set the width length of input element
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<input name="text" id="quote" type="text" value="" multiple="multiple">
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
Option 2:
$("document").ready(function(){
$("#getquotebtn").click(function(){
setInput("hello world")
})
})
function setInput(val){
$ ("#quote").val(val)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<textarea name="text" id="quote" type="text" value="" multiple="multiple"> </textarea>
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
is there any way in angular 2 to pick name/id of input inside divs?
html:
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input type="text" name="firstName"/>
<input type="text" name="firstName"/>
</fieldset>
</div>
component:
function(str){this.var=str}
Not sure if template variables of child elements can be accessed
<div class="form-pages" (click)='function(input1.value, input2.value)'>//if it's possible then what should I put into function param?
<fieldset>
<input #input1 type="text" name="firstName"/>
<input #input2 type="text" name="firstName"/>
</fieldset>
</div>
If this doesn't work you can use
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input #myinput type="text" name="firstName"/>
<input #myinput type="text" name="firstName"/>
</fieldset>
</div>
#ViewChildren('input') inputs:QueryList<ElementRef>;
myFunction() {
let inputs = this.inputs.toArray();
console.log(inputs[0].value;
console.log(inputs[1].value;
}
Ok, I did it alone, thanks for previous answer, but for me it works well, It's needed to call $event.target.name method which will return name of clicked target.
<div (click)="setFocus($event.target.name)">
<input type='text' name='input1 />
<input type='text' name='input2 />
</div>
in componentsetFocus(str){this.var = str)
<div class="form-group" ng-if="firstname">
<label>First Name</label>
<input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name">
</div>
I am using above code. From that i am displaying a popover by clicking -info-sign glyphicon, i am using ng-if condition for show/hide instead of ng-show and ng-hide.My problem is when i use ng-if, popover is not working.But popover working in ng-hide condition and if i remove ng-if condition.My question is why popover not working in ng-if condition.
Gotcha! is, ng-if prevents DOM Element from being rendered, where as ng-show / ng-hide only changes display css-poperty
please refer first paragraph of angular documents for ng-if
Here is the example that demostrate how ng-if works
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.firstname = "Test Data";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-if="lastname"></div>
<div class="form-group" ng-if="firstname">
<label>First Name</label>
<input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name">
<label>Last Name</label>
<input readonly type="text" class="form-control" id="last_name" ng-model="lastname" placeholder="Last Name">
</div>
</div>
</body>
Using bootstrap and can not set an input to hidden. It can be easily set to hidden with JS using
document.getElementById("inputCommentsBrand").style.visibility = "hidden";
but I would like it to be hidden by default.
<div class="form-group">
<label for="inputComments" class="col-sm-2 control-label">Markings</label>
<div class="col-sm-4">
<div><input hidden type="text" class="form-control" id="inputCommentsBrand" name="inputFlags[]" placeholder="Brand and Location: Sbar RH"></div>
<div><input type="text" class="form-control" id="inputCommentsEarTag" name="inputFlags[]" placeholder="Ear Tag Color & #: Green 165"></input></div>
</div>
</div>
Use <body onload="myFunction()"> to hide the field.
Below is the running example.
<script>
function myFunction() {
document.getElementById("inputCommentsBrand").style.visibility = "hidden";
}
</script>
<html>
<body onload="myFunction()">
<div class="form-group">
<label for="inputComments" class="col-sm-2 control-label">Markings</label>
<div class="col-sm-4">
<div><input type="text" class="form-control" id="inputCommentsBrand" name="inputFlags[]" placeholder="Brand and Location: Sbar RH"></div>
<div><input type="text" class="form-control" id="inputCommentsEarTag" name="inputFlags[]" placeholder="Ear Tag Color & #: Green 165"></input></div>
</div>
</div>
</body>
</html>
Instead of visibility:hidden
Use display:none
Ok, so this is the problem. I have a password input form that looks like this:
<form class="form1" action="WEBSITE.HTML" onsubmit="return (this.pass.value==='1234')?true:false;">
<div class="row uniform half collapse-at-2">
<div class="8u">
<input type="password" name="pass" id="password" placeholder="Input password"/>
</div>
<div class="4u">
<input class="fit" type="submit" value="Go" onclick="if (document.getElementById('password').value == '1234');" />
</div>
</div>
</form>
It works great, the only problem is that when I submit the right password, it redirects me to the website, for example, google, with this URL: google.com?pass=1234. So it basically reveals the password when someone inputs it correctly. Is there any way to avoid this? Hope I was clear enough.
Put method attribute in your form:
<form method="post" class="form1" action="WEBSITE.HTML" onsubmit="return (this.pass.value==='1234')?true:false;">
And I think you don't need to use ===, use simple == instead.
UPDATE:
if your site doesn't like some hidden post values, use redirect without sending any of values:
<form class="form1" onsubmit="validateForm(); return false;">
<div class="row uniform half collapse-at-2">
<div class="8u">
<input type="password" name="pass" id="password" placeholder="Input password"/>
</div>
<div class="4u">
<input class="fit" type="submit" value="Go" />
</div>
</div>
</form>
<script type="text/javascript">
function validateForm()
{
var pass = document.getElementById('password').value;
if(pass == '1234') //here 1234 is your password
window.location = 'https://www.google.com';
}
</script>