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>
Related
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!
I am using jquery, bootstrap multi-select dropdown. I want to populate multi-select dropdown (talukas) on selectionChange event of other normal (single-select) dropdown (city). I am not able to figure out why the multi select dropdown populates on initial load of a controller and why not on selection change of other dropdown. Can you please help me. Thank you.
Scenario - 1 => This works fine
<div ng-controller="tempController" ng-init="initializeController()" ng-cloak>
<select id="multiSelect" name="multiSelect" multiselect=""
multiple="" ng-model="selectedTalukas" ng-options="option.talukaId as
option.label for option in talukas"></select>
</div>
// .js
$scope.selectedTalukas = [];
$scope.initializeController = function () {
$scope.talukas = [
{ talukaId: 1, label: 'Taluka1' },
{ talukaId: 2, label: 'Taluka2' },
{ talukaId: 3, label: 'Taluka3' }
]
}
Scenario - 2 => This DO NOT works fine - WHY
<select id="city" class="form-control select2" name="ddlCity" ng-model="c" ng-options="c as c.name for c in city | orderBy:'name'"
ng-change="selectedCityChange(c)" >
</select>
<select id="multiSelect" name="multiSelect" multiselect=""
multiple="" ng-model="selectedTalukas" ng-options="option.talukaId as
option.label for option in talukas"></select>
$scope.selectedCityChange = function (selectedValue) {
if (selectedValue !== undefined) {
$scope.selectedCity = selectedValue;
$scope.selectedCityId = selectedValue.cityId;
$scope.ajaxPost(selectedValue.cityId,
'/api/Taluka/getTalukasForSelectedCity',
$scope.selectedCityChangeComplete,
$scope.selectedCityChangeError);
}
};
$scope.selectedCityChangeComplete = function (response) {
$scope.talukas = response.data.talukaMasters;
}
I have two arrays:
availableTargets: [ {id: 1, name: "Target 1"}, {id: 2, name: "Target 2"}, {id: 3, name: Target 3" ];
selectedTargets: [];
I create a multiple selectlist:
<select multiple>
<option *ngFor="let target of availableTargets" [value]="target .id" (click)="AddTarget($event)">{{target.name}}</option>
</select>
When a user clicks an option, I want to add the 'Target' to the selectedTarget array and remove it from the availableTargets array.
public AddTarget(event) {
let id = event.target.id;
this.availableTargets = this.availableTargets .filter(function (el) { return el.id != id });
this.selectedTargets.push(event.target.id);
}
My multiple select list does not update after removing an element from the availableTarget array. How do I trigger this?
You can do that by simply using index
Template side :
<select multiple>
<option *ngFor="let target of availableTargets; let i = index;" [value]="target .id" (click)="AddTarget(i)">{{target.name}}</option>
</select>
Component Side :
public AddTarget(index) {
this.selectedTargets.push(this.availableTargets[index]);
this.availableTargets.splice(index, 1);
}
WORKING DEMO
this.myForm = fb.group({
name: ['', [Validators.required, Validators.minLength(2)]],
date: ['', [Validators.required, Validators.minLength(2)]],
address: ['', [Validators.required, Validators.minLength(2)]],
,
items: fb.array([
this.initItem(),
])
});
initItem() {
return this.fb.group({
item: [''],
itemType: [''],
amount: [''],
presentRate:this.myForm,
total:['']
});
When submitting the form,this item property will be stored by an object.
Example object:
item{
itemName:"name",
itemRate:1000,...}
How can i use the properties of item object and patch the values in my initItem() methord properties?My scenario is like ,When user select a value from dropdown,the item will get updated and i would like to display the values obtained from the item in other formControls.
Example:
<div *ngFor="let item of myForm.controls.items.controls; let i=index">
<div [formGroupName]="i">
<md2-autocomplete [items]="products"
item-text="product"
(change)="handleChange($event)"
placeholder="Product purchased"
formControlName="item"
>
</md2-autocomplete>
<md-input-container >
<input md-input placeholder="Present rate" [value]="presentRate" formControlName="presentRate" >
</md-input-container>
I would like to update the values on presentRate input box automatically.
You can subscribe to valueChanges of a form control and call setValue on another form control.
this.myForm.get('myControlName').valueChanges
.subscribe(val =>
this.myForm.get('myOtherControlName').setValue(val)
);
I'm supposing that you're trying to update the value for each presentRate based on the selected value in md2-autocomplete. If I'm correct the following should work:
Template:
(change)="handleChange($event, i)"
Component:
handleChange($event: any, i: index) {
const control: AbstractControl = myForm.get(`items.${i}.presentRate`);
let newVal: any;
if ($event.value) {
newVal = $event.value.rate;
} else {
newVal = '';
}
control.patchValue(newVal);
}
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