I need to make a radio button toggle when user click. Is more then 2 buttons.
So, when I click one button if this is selected will no longer be. If is not must be selected.
I try this, but is not works:
app.directive('toggleRadio', function($timeout) {
return {
restict: 'A',
link: function(scope, el, attrs) {
var radioState;
el.on('click', function(){
if (radioState === this) {
this.checked = false;
radioState = null;
} else {
radioState = this;
}
scope.$apply();
});
}
}
It's not require to be a directive... Thanks.
Since it's a single radio button and as you said It's not required to be a directive, which doesn't seem to be necessary as well, then you can do something like below:
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.checked = false;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
<input type="radio" ng-model="checked"
ng-value="true" ng-click="checked=!checked" />
{{checked}}
</div>
</div>
Updated:
Ideally, you should use checkboxes for such requirement, but if it so necessary to use radio, then do it like below:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.valChanged = false;
$scope.checked = "b";
$scope.toggle = function() {
if (!$scope.valChanged) {
$scope.checked = "";
}
$scope.valChanged = false;
}
});
<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
<br>
<input type="radio" ng-model="checked" value="a"
ng-change="valChanged = true" ng-click="toggle()" />Option A
<br>
<input type="radio" ng-model="checked" value="b"
ng-change="valChanged = true" ng-click="toggle()" />Option B
<br>
<input type="radio" ng-model="checked" value="c"
ng-change="valChanged = true" ng-click="toggle()" />Option C
<hr> {{checked}}
</div>
</div>
I choose to create this directive:
myApp.directive('toggleRadio', [function(){
return {
restrict: 'A',
link: function(scope, el, attrs) {
el.on("mouseenter", function(e){
scope.radioStr = e.target.checked;
console.log('scope.radioStr hover: ', scope.radioStr);
});
el.on("click", function(e){
if(scope.radioStr) {
e.target.checked = false;
scope.radioStr = false;
}
else {
e.target.checked = true;
scope.radioStr = true;
}
});
}
}
}]);
And in HTML I have:
With this approach it will works just when user clicks on input itself, not for label. If somebody wants that, must rewrite this directive to find input status with, el.find(), el.next() etc.
Thanks everyone, all your informations help me to understand what've done!
Related
i have two input radio like this :
The operation work's good whene i click offre i have input text i can search for offre and whene i click entrepises clients i have input text and i can search for entreprise. but input clicked not checked why ?
this is my code html :
<label class="radio-inline"><input type="radio" name="{[{showHideTest1}]}" ng-model="showHideTest1" ng-value="{[{showHideTest1}]}" ng-change='newValue()'>Entreprises clientes</label>
<label class="radio-inline"><input type="radio" name="{[{showHideTest1}]}" ng-model="showHideTest2" ng-value="{[{showHideTest2}]}" ng-change='newValue2()'>Offres</label>
and this in my controller
var adminApp = angular.module('adminApp', ['ngSanitize', 'xeditable', 'ngFileUpload', 'ui.bootstrap', 'destegabry.timeline', 'slick', 'bootstrapLightbox', 'angular-loading-bar']).config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
}]);
adminApp.controller('adminCtrl', ['$scope', '$modal', '$http', '$compile', function ($scope, $modal, $http, $compile) {
$scope.showHideTest1 = true;
$scope.showHideTest2 = false;
$scope.newValue = function () {
$scope.showHideTest1 = true;
$scope.showHideTest2 = false;
return true;
};
$scope.newValue2 = function () {
$scope.showHideTest1 = false;
$scope.showHideTest2 = true;
return true;
};
}]);
thank you stackoverflow
I got a requirement to bind a value to a particular model when the value in the other model contains a string starting with "https".
For example, I have two text fields both fields having different model
<input type="text" ng-model="modelText1">
<input type="text" ng-model="modelText2">
Suppose I type a value on the first text field "https", the first input model modelText1 have to bind to the second input model modelText2 and later on i have to maintain it as like two-way binding. i.e. the second field will automatically get the value dynamically when it contains "https" at starting of a string.
Try it like in this Demo fiddle.
View
<div ng-controller="MyCtrl">
<input type="text" ng-model="modelText1">
<input type="text" ng-model="modelText2">
</div>
AngularJS Application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.modelText1 = '';
$scope.modelText2 = '';
var regEx = new RegExp(/^https/);
$scope.$watch('modelText1', function (newValue) {
if (newValue.toLowerCase().match(regEx)) {
$scope.modelText2 = newValue;
} else {
$scope.modelText2 = '';
}
});
});
An other approach is (that avoid using of $watch) is to use AngularJS ng-change like in this
example fiddle.
View
<div ng-controller="MyCtrl">
<input type="text" ng-model="modelText1" ng-change="change()">
<input type="text" ng-model="modelText2">
</div>
AngularJS Application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.modelText1 = '';
$scope.modelText2 = '';
var regEx = new RegExp(/^https/);
$scope.change = function () {
if ($scope.modelText1.toLowerCase().match(regEx)) {
$scope.modelText2 = $scope.modelText1;
} else {
$scope.modelText2 = '';
}
};
});
You can use the ng-change directive like this:
<input type="text" ng-model="modelText1" ng-change="onChange()">
<input type="text" ng-model="modelText2">
and your controller:
$scope.onChange = function() {
if ($scope.modelText1 === 'https') {
$scope.modelText2 = $scope.modelText1;
else
$scope.modelText2 = '';
};
use ng-change to check the text is equal to 'https'
angular.module('app',[])
.controller('ctrl',function($scope){
$scope.changeItem = function(item){
$scope.modelText2 = "";
if(item.toLowerCase() === "https"){
$scope.modelText2 = item
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="modelText1" ng-change="changeItem(modelText1)">
<input type="text" ng-model="modelText2">
</div>
EDiTED
to make sure it does't fail under 'HTTPS' use toLoweCase function to make all lower case
HTML :
<input type="text" ng-model="modelText1" ng-change="updateModal(modelText1)">
JS :
var modelText1 = $scope.modelText1.toLowerCase();
$scope.updateModal = function(){
$scope.modelText2 = '';
if(modelText1.indexOf('https')!=-1){
$scope.modelText2 = modelText1;
}
}
you could also possibly do this as a directive if you want to have a more reusable solution over multiple views http://jsfiddle.net/j5ga8vhk/7/
It also keeps the controller more clean, i always try to use the controller only for controlling complex business logic and business data
View
<div ng-controller="MyCtrl">
<input type="text" ng-model="modelText1" >
<input type="text" ng-model="modelText2" model-listener="modelText1" model-listener-value="https" >
</div>
Angular JS
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.modelText1 = '';
$scope.modelText2 = '';
});
myApp.directive('modelListener', [function() {
return {
restrict: 'A',
controller: ['$scope', function($scope) {
}],
link: function($scope, iElement, iAttrs, ctrl) {
$scope.$watch(iAttrs.modelListener, function() {
if($scope[iAttrs.modelListener] === iAttrs.modelListenerValue ) {
$scope[iAttrs.ngModel] = $scope[iAttrs.modelListener];
} else {
$scope[iAttrs.ngModel] = "";
}
}, true);
}
};
}]);
I know how to do it Without controller as:
html
Let's assume I have a directive named ngUpperCase(either true or false)
<div ng-controller="myControl" >
<input type="text" ng-upper-case="isGiant" >
</div>
Js
myApp.directive('ngUpperCase',function(){
return{
restrict:'A',
priority:0,
link:function($scope,element,attr){
//---to retrieve value
var val = $scope[attr.ngUpperCase];
var anotherVal = $scope.$eval(attr.ngUpperCase);
$scope.$watch(attr.ngUpperCase,function(val){
//---to watch
})
}
};
})
How to make the directive if I'm using something like this?
<div ng-controller="myControl as ctl" >
<input type="text" ng-upper-case="ctl.isGiant" >
</div>
Since it's not very clear what you want to achieve, here is an example of doing what I understand you need: changing an input value to upper or lower case depending on a variable:
function ngUpperCase() {
return{
restrict:'A',
priority:0,
link:function($scope,element,attr){
//---to retrieve value
var val = $scope[attr.ngUpperCase];
var anotherVal = $scope.$eval(attr.ngUpperCase);
$scope.$watch(attr.ngUpperCase,function(val){
if(val) {
element[0].value = element[0].value.toUpperCase();
} else {
element[0].value = element[0].value.toLowerCase();
}
})
}
}
}
function myController() {
this.isGiant = true;
}
angular.module('myApp', []);
angular
.module('myApp')
.controller('myController', myController)
.directive('ngUpperCase', ngUpperCase);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController as ctl" >
lower case<br>
upper case
<input type="text" ng-upper-case="ctl.isGiant" value="TeStiNg123" >
</div>
</div>
I create one input element and on click show the list of items after selecting any item list get hide.
But the focus is not on that element it get down,
So I just want to manually set the focus on input element when radio button list get hide.
Here is use the following code,
View
<label class="item item-input item-stacked-label" ng-click="showDays()">
<span class="input-label black-text">DAYS</span>
<span class="input-ctrl">
<input type="text" id="days" readonly ng-model="data_day" focus-on="!daysflag">
</span>
</label>
<div ng-show="daysflag">
<ion-radio icon="ion-ios-checkmark" ng-model="data_day" ng-value="{{day}}" ng-repeat="day in days" ng-click="hideDayFlag()">{{day}}</ion-radio>
</div>
Controller
$scope.days = [1, 2, 3, 4, 5, 6, 7];
$scope.showDays = function() {
$scope.daysflag = true;
}
$scope.hideDayFlag = function() {
$scope.daysflag = false;
}
Directive
.directive('focusOn',function($timeout) {
return {
restrict : 'A',
link : function($scope,$element,$attr) {
$scope.$watch($attr.focusOn,function(_focusVal) {
$timeout(function() {
_focusVal ? $element[0].focus() :
$element[0].blur();
});
});
}
}
});
Please help me to solve this issue.
You are wrong to use the function scope.$watch. scope.$watch is used to track changes in the $scope.
See detail explanation.
Example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function() {
var vm = this;
vm.isFocus = false;
})
.directive('focusOn', function() {
return {
restrict: 'A',
scope: {
focusOn: "="
},
link: function(scope, $element, $attr) {
scope.$watch('focusOn', function(_focusVal) {
_focusVal ? $element[0].focus() :
$element[0].blur();
});
$element.on("focus", function() {
scope.$applyAsync(function() {
scope.focusOn = true;
});
});
$element.on("blur", function() {
scope.$applyAsync(function() {
scope.focusOn = false;
});
})
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController as vm">
<input ng-model="vm.countRow" focus-on="vm.isFocus">
<input type="button" value="Focus" ng-click="vm.isFocus=true">
<input type="button" value="Blur" ng-click="vm.isFocus=false">{{vm.isFocus}}
</div>
</div>
I am working on the following code. How can I toggle the state of the Boolean, here isChecked through controller in Angularjs checkbox?
<body ng-app="app">
<div ng-controller="checkController">
<input type="checkbox" ng-model="choice" name="item" ng-change="changeSta(choice)" /> Add New Item
</div>
</body>
<script>
var app = angular.module('app', []);
app.controller('checkController', function($scope) {
var isChecked = false;
$scope.changeSta = function() {
//isChecked = true;
};
});
</script>
You can simply check for the changes in your checkbox model:
var app = angular.module('app', []);
app.controller('checkController', function($scope) {
var isChecked = false;
$scope.changeSta = function() {
console.log($scope.choice);
};