I have created a input clear directive to clear input field, but its not working in ionic, ng-click event is not firing, same code is working fine in angular fiddle.
Here is angular demo
Here is ionic demo
My template in ionic look like this
<ion-list>
<label class="item item-input" input-clear >
<input type="text"
ng-model="user.email"
placeholder="{{ 'LOGIN.EMAIL_ID' | translate }}">
</label>
</ion-list>
and very simple controller
.controller('forgotPasswordCtrl', function($scope) {
$scope.user = {};
});
update
directive
.directive('inputClear', function($compile) {
return {
restrict: 'A',
link : function (scope, element, attrs) {
// Find the input and bind keyup
var input = element.find("input");
// Input length
scope.input = { len : 0 };
scope.clearInput = function () {
input[0].value = "";
console.log(input);
};
input.bind("keyup", function() {
scope.input.len = input[0].value.length;
if(scope.input.len > 1) {
console.log(scope.input.len);
}
scope.$apply();
});
var el = angular.element('<a class="clear-text button-clear" ng-show="input.len > 1" ng-click="clearInput()">X</a>');
$compile(el)(scope);
element.append(el);
}
};
})
The reason it doesn't work in ionic is because you have the input-clear directive on a label which is blocking the click from firing. By changing the label element to a div it starts working again.
Heres the codepen
<ion-list>
<div class="item item-input" input-clear>
<input type="email" required ng-model="user.email" placeholder="Email Id">
</div>
</ion-list>
Here's a similar problem that was solved in the same way https://forum.ionicframework.com/t/buttons-inside-form-labels/29033
For the form tag you need to add
novalidate=""
then the message will be fired . here is a working code pen
I have a form. Whenever a user hits the enter key on a text input, or when they tap or click on a radio button, I want to be able to set the focus to the next
"formItem" div.
The structure of my form is set up like this:
<div class="formItem" ng-class="{'invalidField' : calculate.wasSkipped(calculationForm.nonsustainedVT)}">
<ng-form name="nonsustainedVT" novalidate>
<div class="header"><span class="title">3) Nonsustained VT </span></div>
<div class="content">
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTYes" type="radio" required name="nonsustainedVT" ng-value="true" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="4">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTYes">Yes</label>
</div>
</div>
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTNo" type="radio" required name="nonsustainedVT" ng-value="false" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="5">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTNo">No</label>
</div>
<span class="radioValidationHack!" ng-show="false">{{calculate.formData.nonsustainedVT}}</span>
</div>
</div>
</ng-form>
</div>
Every input has a tabindex, so I was considering using this somehow, but once a user has made a selection I do not wish to necessarily just move the focus to the next tabindex because it may be in the same radio group. I wish to set the focus to the next "formItem" div.
Please see the following Plunkr for a larger code example:
http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
You don't need tab index, you can use the order of the tab items inside the form. I would make a myFormItem directive like this:
directive('myFormItem', function() {
return {
link: function(scope, element, attr) {
var form = element.closest('form'),
items = form.find('[my-form-item]'),
index = items.index(element),
nextFormItem = $(items[index+1]);
element.find('input[type=radio]').on('click', function() {
nextFormItem.find('input').focus();
});
element.find('input[type=text]').on('keypress', function(e) {
if (e.which === 13) {
nextFormItem.find('input').focus();
}
});
}
};
});
and you need to add the my-form-item attribute to each .formItem (btw, you should probably use kebab-case for classes)
My English is not good, sorry.
Here is what I want to do:
<button class="add"></button> <input type="text" ng-model="title">
When I click on <button>, it adds one <p ng-bind="title"></p> label into the HTML page, so when I write something into <input> AngularJS helps me to change the title in <p>.
If I add more than one <p> label，I wonder how can I make only the last one <p>'s title to change when I write something into <input>, instead of changing all <p> via AngularJs ng-model="title" attribute.
HTML
<body ng-controller="main">
<button class="add">add</button>
<input type="text" ng-model="title"/>
</body>
JS
app.controller('main',['$scope',function($scope) {
$scope.title = '';
}])
.directive('button',['$compile',function($compile) {
return {
restrict: 'AE',
link: function(scope,element) {
element.bind('click',function() {
var p = $compile('<p ng-bind="title"></p>')(scope);
p.insertBefore(element);
});
}
}
}])
I try to figure out how I can keep the focus on an input field in angularjs after I click on a button.
My goal is to prevent my mobile to hide his keyboard right after I click on the + button. I want to keep the focus on input choice.
Like this the user can add a new choice without the need to click again on my input.
<div id="demo" ng-app="Foobar">
<div ng-controller="DemoCtrl">
<input type="text" ng-model="title" placeholder="title" />
<input type="text" ng-model="choice" placeholder="choice" />
<button ng-click="addChoice(choice)">+</button>
{{choices}}
</div>
</div>
angular.module('Foobar', [])
.controller('DemoCtrl', ['$scope', function ($scope) {
$scope.choices = [];
$scope.addChoice = function (choice) {
$scope.choices.push(choice);
};
}]);
http://jsfiddle.net/gbg09bto/
What is the best strategy ? (directive, ng-focus)
simplest thing is do it by plain javascript
to do it
in html // put a id attribute
<input type="text" id="choice" ng-model="choice" placeholder="choice" />
in controller function
$scope.addChoice = function (choice) {
$scope.choices.push(choice);
document.getElementById("choice").focus(); // get the element by id & focus the input
};
here is the updated Fiddle
I have a radio button, which sets the value of True or False based on the value of transaction type
The demo can be found here
The problem is when I click on any of the radio button, the value of $scope.transaction.debit does not change
My javascript code is
var app = angular.module('myApp', []);
app.controller("MainCtrl", function($scope){
$scope.transaction = {};
$scope.transaction.debit=undefined;
console.log('controller initialized');
});
Please let me know what I am doing wrong.
Also, I do not want to use Angular-UI or AngularStrap for this purpose, unless no other option is available.
I modified dpineda's solution. You can use without removing bootsrap.js dependency. Also there is a working example here.
This is the flow:
Remove data-toggle="buttons" for preventing bootstrap execution.
Add some CSS for fixing the broken view (btn-radio css class)
Add some AngularJS logic for checked style effect.
html
<div class="btn-group col-lg-3">
<label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '0'}">
<input type="radio" data-ng-model="transaction.debit" value="0"> Debit
</label>
<label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '1'}">
<input type="radio" data-ng-model="transaction.debit" value="1"> Credit
</label>
</div>
<p>Transaction type: {{transaction.debit}}</p>
JavaScript
var app = angular.module('myApp', []);
app.controller("MainCtrl", function($scope) {
$scope.transaction = {
debit: 0
};
});
Style
.btn-radio > input[type=radio] {
position : absolute;
clip : rect(0, 0, 0, 0);
pointer-events : none;
}
I found the problem in bootstrap.js. Comment the line e.preventDefault(), it works.
// BUTTON DATA-API
// ===============
$(document)
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
Plugin.call($btn, 'toggle')
e.preventDefault() //Before
//e.preventDefault() //After
})
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
$(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
})
You have a large label stuck over the top of the radio buttons which prevents input to your radio buttons.
The html should read:
<input type="radio" data-ng-model="transaction.debit" value="True">Debit</input>
<input type="radio" data-ng-model="transaction.debit" value="False">Credit</input>
It then works, of course it may not look the way you want it to then.
if you remove de bootstrap code you can control the styles with conditionals
<label class="btn btn-default" ng-class="{'active': transaction.debit == 'some'}">
<input type="radio" data-ng-model="transaction.debit" name="debit" value="some"> Some
</label>
<label class="btn btn-default" ng-class="{'active': transaction.debit == 'other'}">
<input type="radio" data-ng-model="transaction.debit" name="debit" value="other"> Other
</label>
Here's a working version using a new directive:
html
<section ng-controller="MainCtrl">
<div class="form-group">
<label class="col-lg-2 control-label">Type</label>
<div class="btn-group col-lg-3" data-toggle="buttons">
<label class="btn btn-default" radio-button ng-model="transaction.debit" value="True">
Debit
</label>
<label class="btn btn-default" radio-button ng-model="transaction.debit" value="False">
Credit
</label>
</div>
<p>Transaction type: {{transaction.debit}}</p>
</div>
</section>
javascript
// Code goes here
var app = angular.module('myApp', []);
app.controller("MainCtrl", function($scope){
$scope.transaction = {};
$scope.transaction.debit=undefined;
console.log('controller initialized');
});
app.directive("radioButton", function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
element.bind('click', function () {
if (!element.hasClass('active')) {
scope.$apply(function () {
scope.transaction.debit = attrs.value;
});
}
});
}
};
})
Based on francisco.preller's answer I wrote two solutions trying to make it fit for generic use, without loosing the input tags:
html:
<label class="btn btn-info" radiobuttonlbl>
<input ng-model="query.gender" type="radio" value="0">male
</label>
solution #1:
.directive("radiobuttonlbl", function() {
return {
restrict: 'A',
link: function(scope, element, attrs, ctrl) {
element.bind('click', function () {
var input_elem = angular.element(element.find('input')[0]);
(function(o, s, v) {
s = s.replace(/\[(\w+)\]/g, '.$1');
s = s.replace(/^\./, '');
var a = s.split('.').reverse();
while(a.length>1) {
var k = a.pop();
o = o[k];
}
scope.$apply(function(){ o[a.pop()]=v;});
})(scope, input_elem.attr('ng-model'), input_elem.attr('value'));
});
}
};
})
Solution #2:
.directive("radiobuttonlbl", function() {
return {
restrict: 'A',
link: function(scope, element, attrs, ctrl) {
element.bind('click', function () {
var input_elem = angular.element(element.find('input')[0]);
input_elem.prop('checked',true);
input_elem.triggerHandler('click');
});
}
};
})
I have a feeling the first one is better because it make angular do the updating work.
If someone is still searching for an easy way to do this (I personally am hesitant to overload my code with directives), here is what I did:
You can set the value using ng-click on the label. Furthermore, notice the ng-init and active class on the label of the first radio item. This way, you can let bootstrap do its thing, and angular do its thing. The only drawback is you are not letting angular control this using ng-model.
<div class="btn-group col-lg-3" data-toggle="buttons">
<label class="btn btn-default active" ng-init="transaction.debit=true" ng-click="transaction.debit=true">
<input type="radio" checked> Debit
</label>
<label class="btn btn-default" ng-click="transaction.debit=false">
<input type="radio"> Credit
</label>
</div>
I had the same problem. Use ng-click on your labels and it will work fine with bootstrap
<label class="btn btn-default" ng-click="transaction.debit = 'debit'">
Here it's working in plunker
I have the same problem, in my case, the default style change and can't use angular ng-model inside any radio or checkbox button. So i read some articles and found that sometimes if you load JQuery after Bootstrap it overwrites any other instance of jQuery, and it prevent default styles and components to be loaded as bootstrap components, this also happens if you load angularJS after jQuery or viceversa.
PS.- My answer: Check your load script stack, play with it and find which order works for you. (first jquery, then angularJs, finally bootstrap). Usually you require to jQuery to be the first option, Angular and almost every new framework works on top of it. Cheers.