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>
Related
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>
I have used 2 button in the form. I want to disable button1 on initialisation though I have given ng-disabled="true" but whenever user clicks on button2, button1 get enabled. Can anyone tell me how to do this in angularjs ?
You don't need to do anything in the controller if you are not working with the scope variable inside the controller.
So just do something like:
angular.module("app",[]).controller("ctrl",function($scope){})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-disabled="first !== true"> one</button>
<button ng-click="first = true"> two</button>
</div>
You can call one function on click of second button and set the ng-disabled value to false.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.inactive= true;
$scope.enableButton1 = function() {
$scope.inactive= false;
}
});
<div ng-app="myApp" ng-controller="MyCtrl">
<br><input type="button" ng-disabled="inactive" value="button1"/>
<br><input type="button" ng-click="enableButton1()" value="button2"/>
</div>
use scope variables and assign them to ng-disabled
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.firstBtn = true;
$scope.secondBtn = false;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-disabled="firstBtn" > one</button>
<button ng-disabled="secondBtn" ng-click="firstBtn = false"> two</button>
</div>
Its very simple as given below:
JS
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.isDisabled = true;
$scope.toggleButton = function() {
$scope.isDisabled = !$scope.isDisabled;
}
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button ng-click='toggleButton()'>
Toggle
</button>
<button ng-disabled='isDisabled'>
I am button
</button>
</div>
</div>
Here is the jsfiddle link Jsfiddle demo
I need to access the form data (ng-model="name") in the parent controller DynamicFormCtrl . How do i access the data input in the form in the DynamicFormCtrl . I am not getting idea how to i access them.Though the data can be accessed in their own scopes.
<body ng-app="exampleApp" ng-controller="DynamicFormCtrl as ctrl">
<div>
<button ng-click="ctrl.addForm(0)">Form One</button> //add form1
<button ng-click="ctrl.addForm(1)">Form Two</button> //add form 2
<button ng-click="ctrl.addForm(2)">Form Three</button>// add form 3
</div>
<div ng-repeat="form in ctrl.displayedForms track by $index"> //display form on button press
<ng-include src="form"></ng-include> //Include from from the Script
</div>
<script type="text/ng-template" id="form1.tpl.html">
<label>
{{name}}
Form one is an input: <input type="text" ng-model="name"/>
</label>
</script>
<script type="text/ng-template" id="form2.tpl.html">
<label>
Form two gives you choices: <input type="radio"/> <input type="radio"/>
</label>
</script>
<script type="text/ng-template" id="form3.tpl.html">
<button>Form three is a button</button>
</script>
<script type="text/javascript">
angular.module("exampleApp", [])
.controller("DynamicFormCtrl", function($scope) {
var ctrl = this;
$scope.form_name = $scope.name;
console.log($scope.form_name);
var forms = [
"form1.tpl.html",
"form2.tpl.html",
"form3.tpl.html",
];
ctrl.displayedForms = [];
ctrl.addForm = function(formIndex) {
ctrl.displayedForms.push(forms[formIndex]);
}
});
</script>
</body>
As you are using the controller-as syntax you should use ctrl.name in the input field
<input type="text" ng-model="ctrl.name"/>
In the controller you can then use the input by using ctrl.name
You then also do not need to inject the scope as you use the controller-as syntax.
For further reading to controller-as I recommend
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
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 using AngularJS and Angular-UI Bootstrap tabs. This is my controller:
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.saveLanguage = function()
{
console.log($scope.test.vari); // loged undefined
}
}]);
My view
<div class="row clearfix">
<tabset>
<tab heading="Jezik">
<form role="form" name="test">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Save</button>
</form>
</tab>
</div>
Can someone help me to see why is loging undefined when I am using Angular-UI Bootstrap Tabs. Is it creating own scope. How tu access model value ?
This code solved my problem (removed name atribute from form, added ng-model="test.vari", and added $scope.test= {} in my controller) :
<tabset>
<tab heading="Jezik">
<form role="form">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="test.vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Spremi Jezik</button>
</form>
</tab>
</div>
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.test= {};
$scope.saveLanguage = function()
{
console.log($scope.test.vari);
// SettingsFactory.update({ id:$stateParams.user_id }, $scope.language);
}
}]);
The tab creates child scopes so we need to bind it to an expression that evaluates to a model in the parent scope.
For this, the model must use a . like this:
ng-model='object.variable'
And we must declare the object in controller's top:
$scope.object = {};
Example:
angular.module('test', ['ui.bootstrap']);
var DemoCtrl = function ($scope) {
$scope.obj = {text: ''};
$scope.show = function() {
alert('You typed: ' + $scope.obj.text)
}
};
<!doctype html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
Value outside the tabs: {{obj.text}}
<uib-tabset>
<uib-tab heading="Tab 1">
<input ng-model="obj.text">
<button ng-click="show()">Show</button>
</tab>
</tabset>
</div>
</body>
</html>