in JavaScript like this :
<!DOCTYPE html>
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input field</button>
<input type="text" id="myInput">
</body>
</html>
How to use with AngularJS?
You can solve it using ng-model directive, here an example how you can implement it in your code
index.html
<div ng-controller="MainController">
<p>Clear the input field when you click on the button:</p>
<button ng-click="clearInput()">Clear input field</button>
<input type="text" id="myInput" ng-model="input">
</div>
app.js
var myApp = angular.module('myApp',[]);
myApp.controller('MainController', ['$scope', function($scope) {
$scope.input = '';
$scope.clearInput = function() {
$scope.input = '';
}
}]);
You can see the angularjs documentation for more examples.
https://docs.angularjs.org/guide/controller
i succeeded in dom javascript, with inline onclick event
<input type="text" id="hdd_data_2" value="3 TB">
<button type="button" onclick="document.getElementById('hdd_data_2').value ''">Clear</button>
Related
How to append choose images one by one to div tag using using ng-repeat when I click Add button after chosen file <input type="file"> in Angular JS. I have tried code below:
<body ng-app="myApp">
<div ng-controller="mainController">
<div>
<h3>Added Images: {{addedImages()}}</h3>
</div>
<div>
<input type="file" id="filename" ng-model="filename" name="">
<button ng-click="test()">Add Image</button>
<div class="shelfgallery"></div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
$scope.imageSources=[];
$scope.test = function(){
var url = ""//facing trouble in getting full URL of choosen image
alert(url);
$scope.imageSources.push({
imges: $scope.filename
});
var element = angular.element($('.shelfgallery'));
element.append('<img id="img_11" ng-repeat="imageSource in imageSources track by $index" ng-src="{{imageSource }}" /><br><br>');
//$compile(element)($scope);
};
$scope.addedImages = function(){
return $scope.imageSources.length;
}
});
</script>
</body>
If any wrong here let me know, or any other solution.
Here are the code:
I want to get checked radio button value with angularjs click funciton?
<input type="radio" name="calender" value="calender">
<input type="radio" name="calender" value="calender2" checked="checked">
<button ng-click="get_val($event)">Click</button>
$scope.get_val= function(event)
{
}
Here you can add this to get value
var flag_item_val = $("input:radio[name=calender]:checked").val();
Just check out this below code snippet on how to bind values to the ng-model and you can access them anywhere in scope.
var app = angular.module('plunker', []);
app.controller('MainCtrl',
function MainCtrl($scope) {
$scope.radioVal = 'calender2';
$scope.get_val = function(event) {
console.log($scope.radioVal);
}
});
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<input type="radio" name="calender" value="calender" ng-model="radioVal">
<input type="radio" name="calender" value="calender2" ng-model="radioVal">
<button ng-click="get_val($event)">Click</button>
</div>
I have a problem to show INPUT field when do some action.
I have BUTTON (Click here) as soon as user made a click event on button i wanted to show input field
I have done this by using jQuery.
Can any one help me in Angular.js
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.boxShow = false;
});
</script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
show box
<div ng-show="boxShow">
<textarea rows="4" cols="50">text</textarea>
</div>
</div>
</div>
https://jsfiddle.net/bxwjpmaa/1/
HTML
<div class="btn btn-primary" ng-click="openTextBox();">Click Me To open text box</div>
<div ng-show="openTextBox == true">
<input type="text"/>
</div>
SCRIPT :
$scope.openTextBox = function () {
$scope.openTextBox = true;
}
please don't take scope variables and function names same
example here
$scope.openTextBox = function () {
$scope.openTextBox = true;
}
//this is not correct as per angular documentation because scope.openTextBox name already assigned to scope function,again its assigning scope variable "$scope.openTextBox = true" here u will get errors when ever u clicked div second time" TypeError: boolean is not a function" it will throw this error.so please dont use which is already assigned scope function dont assign scope variable
see this fiddle url : https://jsfiddle.net/veerendrakumarfiddle/bxwjpmaa/2/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ol>
<li ng-repeat="element in elements">
<input type="text" ng-model="element.value"/>
</li>
</ol>
<br/>
<b>Click here to add Textbox:</b><br/><input type="button" value="New Item" ng-click="newItem()"/>
<br/>
<br/>
<b>Click here to see ng-model value:</b><br/>
<input type="button" value="submit" ng-click="show(elements)">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var counter=0;
$scope.elements = [ {id:counter, value : ''} ];
$scope.newItem = function(){
counter++;
$scope.elements.push( { id:counter,value:''} );
}
$scope.show=function(elements)
{
alert(JSON.stringify(elements));
}
});
</script>
</body>
</html>
I am trying to uncheck checkbox with submit button. The idea is when checkbox is checked button is shown, and when button is clicked checkbox is unchecked and button is hidden.
HTML page:
<html ng-app="myApp" ng-controller="myCtrl">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="script.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div ng-repeat="foo in boxes">
<div>
<input type="checkbox" name="cb" id="cb" ng-model="show" />{{foo}}
</div>
<div ng-show="show">
<form ng-submit="submit()">
<input type="submit" name="sumbit" id="sumbit" value="Hide" />
</form>
</div>
</div>
</body>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.boxes = ['a','b','c'];
$scope.submit = function(){
$scope.show = false;
}
});
On Plukner: http://plnkr.co/edit/z9W0w18dkgYJ3D5Q3aR2?p=preview
Thanks for any help!
The problem is that you're using a single variable to store states of 3 items yet Angular creates a scope for each context in the ng-repeat iteration. By changing show to an array and using $index to reference each of them, the show array from the main scope is passed to all three child scopes and there are no conflicts, so it works:
app.controller('myCtrl', function($scope) {
$scope.boxes = ['a','b','c'];
$scope.show = [];
$scope.submit = function(){
$scope.show = [];
}
});
HTML
<div ng-repeat="foo in boxes">
<div>
<input type="checkbox" name="cb" id="cb" ng-model="show[$index]" />{{foo}}
</div>
<div ng-show="show[$index]">
<form ng-submit="submit()">
<input type="submit" name="sumbit" id="sumbit" value="Hide" />
</form>
</div>
</div>
See it here: http://plnkr.co/edit/kfTMaLTXWtpt7N9JVHAQ?p=preview
(note sure if this is exactly what you wanted because there's no question, but it's enough to get you started)
UPDATE
And here is the version where Hide unchecks only "its own" checkbox ($scope.submit now accepts the index parameter): http://plnkr.co/edit/YVICOmQrPeCCUKP2tBBl?p=preview
You need to change the html code and simplify it as
Instead of form use simple ng-click
<div ng-show="show">
<input type="submit" value="Hide" ng-click="show = !show" />
</div>
I am new to angular js and I am struck with accessing the form element in ng-submit function.
My intention is to set the action attribute dynamically and submit the form rather using jquery selector and setting the action attribute.
<div ng-app="MyApp">
<form name="myForm" ng-controller="myController"
ng-submit="SubmitFunction(myForm)">
<input type="submit" value="Submit" />
</form>
</div>
JS:
var myApp = angular.module("MyApp",[]);
myApp.controller("myController", ["$scope", function ($scope) {
$scope.SubmitFunction = function (formElement) {
//Set action attribute ???
//Submit the form ????
};
}]);
Thanks for ur help. Finally found a solution.
<div ng-app="MyApp">
<form name="myForm" ng-controller="myController"
ng-submit="SubmitFunction($event)">
<input type="submit" value="Submit" />
</form>
</div>
JS:
var myApp = angular.module("MyApp",[]);
myApp.controller("myController", ["$scope", function ($scope) {
$scope.SubmitFunction = function (e) {
var formElement = angular.element(e.target);
formElement.attr("action", actionLink);
formElement.submit();
};
}]);