I have developing some code in Angular JS and i need to disable radio button based on previous selection or change in text box
in JS controller:
PPCO.cusGender = [ {
id : '1',
key : 'Male',
value : 'Male',
disable:false
}, {
id : '2',
key : 'Female',
value : 'Female',
disable:false
}, {
id : '3',
key : 'TG',
value : 'TG',
disable:false
}];
PPCO.changeapplicant = function() {
switch (PPCO.p_SALUTATION.toLowerCase().trim()) {
case 'mrs.':
case 'miss.':angular.forEach(PPCO.cusGender, function(val, key) {
if(val.key != 'Male')
{
val.disable = false;
}
});
break;
}
};
in HTML:
<input type="text" ng-model="PPCO.changeapplicant" class="color" ng-change="PPCO.changeapplicant()">
<label class="radio" ng-repeat="option in PPCO.cusGender">
<input type="radio" name="gender"
ng-model="PPCO.cusgendername" value="{{option.value}}"
ng-disabled="option.disable">
<i></i>
</label>
My question is i able change the "ng-disabled =true" value but it is not enabling again. How to make that
I have created this plnkr for this case: https://plnkr.co/edit/F4JZcf6Nm5Csbxbg
I think you have 2 errors happening at the same time:
You're iterating over one array. So, you don't need to use angular.forEach, you can use array.forEach
Also, most important, you're setting false when the element is mrs. or miss. and it's ok. BUT, you're not setting back to true. So, you will have to include one else clause like this:
if (['mrs.', 'miss.'].includes($scope.applicant.toLowerCase().trim())) {
$scope.cusGender.forEach(function(element) {
element.disable = element.key == 'Male';
});
} else {
$scope.cusGender.forEach(function(element) {
element.disable = false;
});
}
I think that would be all!
Related
Here is my data
This.dynamicCmb = [{
id: 1,
label: 'aLabel',
subItem: ['aSubItem1','aSubItem2','aSubItem3']
}, {
id: 2,
label: 'bLabel',
subItem: [ 'bSubItem' ]
}];
I want to display 'subItem' data depending on the value I give i.e, either id or label. if I search any one it should display value.
<input type="text" ng-model="vm.selectedColumn" /> //Textbox to take either id or name value
<input type="button" value="Get" ng-click="GetCmbValue()" /> //On click of button it should load dropdown
<select ng-options="item.name for item in vm.selectedColumn.subItem" ng-model="vm.selected"></select>
.js file
This.GetCmbValue = function () {
// I should load drop down value here
};
for eg: if I give '1' in textbox then subItem of '1' should display. If I give 'alabel' in textbox then also subItem of 'alabel' should display. It should search either on id or label whatever I give. Please help me to do this
You can attach filter to your ngOption. So that every time you type value in textbox, it will filter data accordingly.
We bind the output of textbox to the filter.
.js file
app.filter('itemFilter', function() {
return function(input,val) {
var out = new Array();
angular.forEach(input, function(item) {
if (item.id == val || item.label == val) {
out = out.concat(item.subItem);
}
});
return out;
};
});
HTML File
<input type="text" data-ng-model="val">
<select data-ng-options="item for item in dynamicCmb | itemFilter : val" data-ng-model="selected"></select>
change your select code by this
<select ng-options="item.name for item in vm.selectedColumn.subItem|filter:{Id:vm.selectedColumn}" ng-model="vm.selected"></select>
I am trying to get the of checkbox selected and store its result in an array . when the checkboxes are selected by default its not getting its value but after toggling if if a particular checkbox is selected its
working correctly.Please tell me what i am doing wrong and thanks in advance.
here my html code:
<div ng-repeat="album in albums" ng-disabled="checked">
<input type="checkbox" ng-model="album.selected" value={{album.value}} ng-checked = "true"/> {{album.name}}
</div>
<button ng-click = "setAlbums()" type = "submit" class = "col-sm-3 btn btn-primary" style = "margin-left:3%;"> Save </button>
here my js code:
$scope.albums = [{
value: 3,
name: 'a'
},
{
value: 4,
name: 'b'
},
{
value: 5,
name: 'c'
},
{
value: 6,
name: 'd'
},
{
value: 7,
name: 'd'
},
{
value: 8,
name: 'e'
},
{
value: 9,
name: 'f'
}];
$scope.setAlbums = function () {
$scope.albumNameArray = [];
angular.forEach($scope.albums, function(album){
if (album.selected) $scope.albumNameArray.push(album.value);
});
console.log("$scope.albumNameArray",$scope.albumNameArray)
}
Initially while ng-repeat is rendering the array it will look for the album.selected value in the array itself, so if its not able to find it, it will be virtually checked due to your ng-checked = true attribute but it will not be set in the ng-model, so
try it like this, use a another property called ng-init = "album.selected = true" in,
<input type="checkbox" ng-model="album.selected" value="{{album.value}}" ng-checked="true" ng-init="album.selected = true"/>
then try with the save button click.
PLUNKER WITH YOUR CODE
var phoneIdentification = {
'phoneFiled': {
'label': 'Enter Phone',
'regex': '[0-9]{11,12}'
}
};
var mailIdentification = {
'mailField': {
'label': 'Enter Email',
'regex': '^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$'
},
'passwordField': {
'label': 'Enter Password'
}
};
I have for example this two data. Default I render first one:
$scope.data.dataSource = phoneIdentification;
And Than in view:
<div ng-repeat="(key, item) in dataSource">
<label>{{item.label}}</label>
<input type="text" ng-if="item.regex" ng-pattern="{{item.regex}}"/>
</div>
And I have button also, on click I changed dataSource, I'm setting new value from controller:
$scope.data.dataSource = mailIdentification;
View is updating but, problem is validations, It doesn't update input's Reg-exes>
How it is possible to re-render whole view?
You are missing the regex property in the passwordField field in the mailIdentification object. You need it because you are accessing it in the ng-repeat directive.
Your mailIdentification object should look like this:
var mailIdentification = {
...
'passwordField': {
'label': 'Enter Password',
'regex': `some regex here`
}
};
I have a custom validator as shown below...
window.Parsley
.addValidator('invalidwords', {
requirementType: 'regexp',
validateString: function(value, requirement) {
var wordval = value.split(" ");
$.each(wordval,function(idx,item) {
return !/^\b(?:Stadium|GT|BB|HB|Simul|VNOSE|LT|combination|LT1|SSGT|BW|HBS|simul|combo|2hbs|4d|lt2|theatre)\b$/i.test(item)
});
},
messages: {
en: 'Invalid words detected.'
}
});
Basically what I want is to check a string to see if it contains any of the words in my regex.
Before I added the each() function it would work for single words, but it wouldn't work when i entered in something like gt lt so I had to put them in an array and check each one.
It appears to work when I debug as it does return false, but it seems as though parsley isn't seeing it or something to that effect.
Here is how I am calling it...
<div class="col-sm-6 col-lg-6">
<div class="form-group">
<input type="text" name="company" data-parsley-group="eventinfo" id="Company" class="form-control" placeholder="Company" maxlength="60" tabindex="3" title="Company" parsley-trigger="keyup" data-parsley-invalidwords="" value="#request.args.company#">
</div>
</div>
I also tried changing requirementType: 'regexp', to requirementType: 'string',
Got it figured out. Had to do the return outside the loop. here is my final code.
window.Parsley
.addValidator('invalidwords', {
requirementType: 'regexp',
validateString: function(value, requirement) {
var wordval = value.split(" ");
var valid = true;
$.each(wordval,function(idx,item) {
console.log(item,/^\b(?:Stadium|GT|BB|HB|Simul|VNOSE|LT|combination|LT1|SSGT|BW|HBS|simul|combo|2hbs|4d|lt2|theatre)\b$/i.test(item));
if(/^\b(?:Stadium|GT|BB|HB|Simul|VNOSE|LT|combination|LT1|SSGT|BW|HBS|simul|combo|2hbs|4d|lt2|theatre)\b$/i.test($.trim(item))){
valid = false;
}
});
return valid;
},
messages: {
en: 'Invalid words detected.'
}
});
I use select2 from angular-ui, everything works ok, but it passes to ng-model object and I need to get plain value
this is in controller
$scope.units = {
createSearchChoice:function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term) === 0; }).length===0) {
return {id:term, text:term};
}
},
multiple: false,
data: [{id: 0, text: 'kg'},{id: 1, text: 'ks'},{id: 2, text: 'm'}, {id: 3, text: 'h'}]
};
and this in view
<input type="hidden" class="form-control" id="unit_name" ui-select2="units" ng-model="newItem.unit">
but result is {id: 0, text: 'kg'} and I would need only text from that object. I know that is is possible to get it with .val(), but I not able to use with angular... So how to format output? Is it possible?
Thanks
I also have this problem, and i got solution by remove some line of code from the select2-ui.js.
Commnet following code in select2-ui.js
elm.bind("change", function(e) {
e.stopImmediatePropagation();
if (scope.$$phase || scope.$root.$$phase) {
return;
}
scope.$apply(function() {
controller.$setViewValue(
convertToAngularModel(elm.select2('data')));
});
});