I got two elements paragraph and input tag. When i click the paragraph, the input should show and paragraph should hide. when the input is blurred the input should hide and paragraph should show.
I tried this but not working
<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" ng-blur="edit = false">
<input type=text name="email" ng-blur="blurUpdate()" />
</div>
Move ng-blur to input please see demo below
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope, $timeout) {
$scope.showEditor = function() {
$scope.edit = true;
var textbox = document.getElementById("input_email");
var tmp = $scope.text
$scope.text = ""
$timeout(function() {
textbox.focus();
$scope.text = tmp;
});
}
$scope.blurUpdate = function() {
// add this line
$scope.edit = false;
//your code
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl" ng-init="text='some text'">
<p ng-click="showEditor()" ng-show="!edit">{{text}}</p>
<div ng-show="edit">
<input type=text name="email" ng-blur="blurUpdate()" ng-model="text" id="input_email" />
</div>
</div>
</div>
the ngBlur is compatible with input tag, that is why it is not working:
<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" >
<input type=text ng-blur="edit = false" name="email" />
</div>
http://jsfiddle.net/xgp2qsww/1/
Related
I am a newbie in AngularJS. I am having multiple forms on a single page which gets displayed based on the user selection only one at a time.
The DOM has two child controllers namely FirstFormController, SecondFormController wrapped under a parent controller named XceptionController.
A parent controller function is used to submit the form data from both the children. The form data is saved on to the parent controller's scope.My HTML looks like below
<div ng-app="app">
<div class="container" ng-controller="XceptionController">
<form class="form-container">
<select id="select-form" ng-change=selectForm() ng-model="selectedForm">
<option value="select" disabled selected>Select an Option</option>
<option value="firstform">Get Firstname</option>
<option value="secondform">Get Lastname</option>
</select>
</form>
<div ng-controller="FirstFormController" class="firstform" ng-show="fname">
<form name="firstnameform">
<input type="text" name="firstname" ng-model="form.firstname" id="firstname">
<label for="#firstname">Firstname</label>
</form>
<div class="content" ng-show="fname">
<p>Firstname is {{form.firstname}}</p>
</div>
</div>
<div ng-controller="SecondFormController" class="secondform" ng-show="lname">
<form name="lastnameform">
<input type="text" name="lastname" ng-model="form.lastname" id="lastname">
<label for="#lastname">Lastname</label>
</form>
<div class="content" ng-show="lname">
<p>Lastname is {{form.lastname}}</p>
</div>
</div>
<button ng-click="submitForm(form)">Submit</button>
And my js looks like
var app = angular.module('app', []);
app.controller('XceptionController', function($scope){
$scope.form = {};
$scope.selectedForm = '';
$scope.selectForm = function() {
$scope.lname = 0;
$scope.fname = 0;
var foo = angular.element(document.querySelector('#select-form')).val();
if(foo == 'firstform') {
$scope.fname = 1;
}
else if(foo == 'secondform'){
$scope.lname = '1';
}
};
$scope.submitForm = function(form){
//form data
console.log(form);
};
});
app.controller('FirstFormController', function($scope){
$scope.firstname = "";
});
app.controller('SecondFormController', function($scope){
$scope.lastname = "";
});
But on submitting the form I get the data from both the forms since I set it on the parent's scope. Is there a way by which I can submit the form and get the form data only for the form which is currently displayed. This fiddle will help you more in understanding my question. https://jsfiddle.net/xmo3ahjq/15/
Also help me in knowing if my code is properly written the way it should be or is there a better way to implement this. Should the form submission code be placed under a separate angular service ?
var app = angular.module('app', []);
app.controller('XceptionController', function($scope) {
$scope.form = {};
$scope.selectedForm = null;
$scope.selectForm = function() {
// reset the form model object
$scope.form = {};
};
$scope.isSelected = function(formName) {
return $scope.selectedForm === formName;
};
$scope.submitForm = function(form) {
// form data
console.log(form);
};
});
app.controller('FirstFormController', function($scope) {
});
app.controller('SecondFormController', function($scope) {
});
<div ng-app="app">
<div class="container" ng-controller="XceptionController">
<form class="form-container">
<select id="select-form" ng-change=selectForm() ng-model="selectedForm">
<option value="" disabled selected>Select an Option</option>
<option value="firstform">Get Firstname</option>
<option value="secondform">Get Lastname</option>
</select>
</form>
<div ng-controller="FirstFormController" class="firstform" ng-show="isSelected('firstform')">
<form name="firstnameform">
<input type="text" name="firstname" ng-model="form.firstname" id="firstname">
<label for="#firstname">Firstname</label>
</form>
<div class="content">
<p>Firstname is {{form.firstname}}</p>
</div>
</div>
<div ng-controller="SecondFormController" class="secondform" ng-show="isSelected('secondform')">
<form name="lastnameform">
<input type="text" name="lastname" ng-model="form.lastname" id="lastname">
<label for="#lastname">Lastname</label>
</form>
<div class="content">
<p>Lastname is {{form.lastname}}</p>
</div>
</div>
<button ng-click="submitForm(form)">Submit</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
I try to set default value for some input.
When i try in ionic framework to set a default value with
ng-value
that work but when i submit the form, i ll never get the default value. I get undefined.
I think it's because i cannot initiate my objet before render my form.
But with dynamic input name i can't find the way.
This is my controler :
function MyCtrl($scope) {
$scope.frequences = [];
$scope.medicaments = {
15:{dose : 10,frequence :"matin", name:"test1"},
16:{dose : 15,frequence :"matin", name:"test2"},
17:{dose : 19,frequence :"matin", name:"test3"},
};
$scope.genererDate = function(form) {
console.log($scope.frequences)
}
And my HTML
<ion-item ng-repeat="(key, value) in medicaments " >
<span class="">{{key}} - {{value.name}}</span>
<input type="text" ng-model="frequences[key]['dose']" ng-init="frequences.key['dose'] = value.dose" >
<input type="text" ng-model="frequences[key]['frequence']" ng-init="frequences[key]['frequence'] = value.frequence">
</ion-item>
i have a Fiddle, ng-value doesn't work here, so i have try with ng-init.
http://jsfiddle.net/hwunpm5q/2/
Use {} to define $scope.frequences = {}; not an array []
And it should be access through frequences[key]['dose'] not frequences.key['dose']
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.frequences = {};
$scope.medicaments = {
15:{dose : 10,frequence :"matin", name:"test1"},
16:{dose : 15,frequence :"matin", name:"test2"},
17:{dose : 19,frequence :"matin", name:"test3"},
};
$scope.genererDate = function(form) {
console.log($scope.frequences)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="myform" novalidate="" ng-submit="genererDate(myForm)" >
<ion-item ng-repeat="(key, value) in medicaments " >
<span class="">{{key}} - {{value.name}}</span>
<input type="text" ng-model="frequences[key]['dose']" ng-init="frequences[key]['dose'] = value.dose" >
<input type="text" ng-model="frequences[key]['frequence']" ng-init="frequences[key]['frequence'] = value.frequence">
<br/>
</ion-item>
<br/>
<button class="button button-full buttonValiderTraitement" type="submit" ng-click="Submit">Submit</button>
</form>
</div>
</body>
In my HTML form there are 5 check boxes. How can I check which check boxes are checked or not at the time of the form submission?
I am using this little piece of code. Feel free to take it.
In your controller:
$scope.sentinel = [];
$scope.toggleSelection = function(value) {
// Bit trick, equivalent to "contains"
if (~$scope.sentinel.indexOf(value)) {
var idx = $scope.sentinel.indexOf(value);
$scope.sentinel.splice(idx, 1);
return;
}
$scope.sentinel.push(value);
};
Then in your HTML:
<span ng-repeat="key in $scope.yourarray">
<md-checkbox style="margin-left:30px;" aria-label="Select item"
ng-click="toggleSelection(key)"><span>{{ key }}</span></md-checkbox>
<br/>
</span>
This allows you to have an array of any size and using the sentinel array to register already checked values. If you check again a box, the toogleSelection will prevent you from adding again a value.
You can use the Checklist-model of Angular.js. It is very useful:
var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl1', function($scope) {
$scope.roles = [
'guest',
'user',
'customer',
'admin'
];
$scope.user = {
roles: ['user']
};
$scope.checkAll = function() {
$scope.user.roles = angular.copy($scope.roles);
};
$scope.uncheckAll = function() {
$scope.user.roles = [];
};
$scope.checkFirst = function() {
$scope.user.roles.splice(0, $scope.user.roles.length);
$scope.user.roles.push('guest');
};
$scope.showCheckedOnes = function() {
var checkedBoxes = "";
for (var i = 0; i < $scope.user.roles.length; i++) {
checkedBoxes += $scope.user.roles[i] + " ";
}
alert(checkedBoxes);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://vitalets.github.io/checklist-model/checklist-model.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl1">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>
<div>
<div>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkFirst()" style="margin-right: 10px">Check first</button>
<button ng-click="showCheckedOnes()" style="margin-right: 10px">Show checked ones</button>
You can define the array value and map to html.
$scope.checkbox = [];
HTML
<input ng-model="checkbox[0] type="checkbox" />
<input ng-model="checkbox[1] type="checkbox" />
<input ng-model="checkbox[2] type="checkbox" />
<input ng-model="checkbox[4] type="checkbox" />
Or you can define checkbox as object and change checkbox[index] to checkbox[name].
I have angular 1.5 Version. The Text Area is not giving the live preview. I've written ng-model and written controller code, now I have no idea what is missing in it.
Controller Code:
(function() {
var app = angular.module('wildfire', []);
var updateStatusText = 'test';
app.controller('UpdateStatusController', function() {
this.message = updateStatusText;
this.updateStatus = function(text) {
var StatusObject = {};
updateStatusText = text;
}
});
}
HTML Code:
<div class="well">
<form class="form-horizontal" role="form" ng-controller="UpdateStatusController as statusUpdate" ng-submit="statusUpdate.updateStatus(statusUpdate.message)">
<h4>What's New</h4>{{statusUpdate.message}}
<div class="form-group" style="padding:14px;">
<textarea class="form-control" ng-model "statusUpdate.message" placeholder="Update your status"> </textarea>
{{statusUpdate.message}}
</div>
</div>
Its not giving the live preview and after submitting it does not send any value associated with the TextArea. I debugged it several time but no result totally frustrating.
Change this
ng-model "statusUpdate.message"
To this
ng-model = "statusUpdate.message"
Complete example
<div class="well">
<form class="form-horizontal" role="form" ng-controller="UpdateStatusController as statusUpdate" ng-submit="statusUpdate.updateStatus(statusUpdate.message)">
<h4>What's New</h4>{{statusUpdate.message}}
<div class="form-group" style="padding:14px;">
<textarea class="form-control" ng-model= "statusUpdate.message" placeholder="Update your status"> </textarea>
{{statusUpdate.message}}
</div>
</div>
angular.module('wildfire', []).controller('UpdateStatusController',['$scope', '$http', function($scope, $http){
var updateStatusText = 'test';
this.message = updateStatusText;
this.updateStatus = function(text) {
var StatusObject = {};
updateStatusText = text;
}
}]);
<div class="filter_hide">
<div ng-cloak ng-repeat="web in website" >
<label ng-show="filter[web.websiteId]"><input type="radio" id="{{web.websiteId}}" ng-checked="webCheck" id="{{web.websiteId}}" value="{{web.websiteId}}" name="webname" ng-model="filter[web.websiteId]" />{{web.websiteName}} ({{web.couponCount}})</label>
</div>
</div>
<div class="filter_show">
<div class="check_box" ng-hide="filter[web.websiteId]" ng-repeat="web in website">
<label><input type="radio" value="{{web.websiteId}}" ng-checked="webCheck" id="{{web.websiteId}}" name="webname" ng-click="webcall(web)" ng-model="filter[web.websiteId]" />{{web.websiteName}} ({{web.couponCount}})</label>
</div>
</div>
I am trying to make when some one click on radio button form "filter_show" div then need to hide form there and show on "filter_hide" div and if user again click another radio button form "filter_show" div then need to hide previously select radio button form "filter_hide" div and show new one there.
I am using angular js 1.2.17
my controller -
app.controller('myCtrl', function ($scope, $http) {
$http({method: 'GET', url: '/asasa/asa/'}).success(function(data) {
$scope.website = data.websites;
$scope.onlinedata = data.coupons;
$scope.restdata = $scope.onlinedata;
$scope.webcall = function (web) {
$http({method: 'GET',url: '/asas/cccc/asas?websiteId='+web.websiteId}).success(function(data) {
$scope.onlinedata = data.coupons;
});
};
Take a look a this example
fiddle Example
<div ng-app>
<div ng-controller='contorller'>
<div class='to_hide' ng-if='hide === true'>
<input type="radio" name='hide' ng-click="showElement('show')" />Hide<br>
<input type="radio" name='hide' ng-click="showElement('show')" />Hide<br>
</div>
<br>
<div clas='to_show' ng-if='hide === false'>
<input type="radio" name='show' ng-click="showElement('hide')" />Show</br>
<input type="radio" name='show' ng-click="showElement('hide')" />Show</br>
</div>
</div>
</div>
<script>
function contorller($scope){
$scope.hide = true;
$scope.showElement = function(value){
if(value === 'hide'){
$scope.hide = true;
}else{
$scope.hide = false;
}
}
}
</script>