I am trying to get the selected values in a dual box.
with refference of this link http://www.virtuosoft.eu/code/bootstrap-duallistbox/
I have done something like below code snippet:
.html
<select name="duallistbox_demo1[]"
ng-model="recSchedule"
ng-options="recSchedule as recSchedule.recSchedulingName for recSchedule in recordingSchedules"
size="10"
multiple
bs-duallistbox
selected-list-label="{{ settings.selectedListLabel }}"
non-selected-list-label="{{ settings.nonSelectedListLabel }}">
</select>
json file:
[
{
"id": "1",
"recSchedulingName": "Record Schedule 1"
},
{
"id": "2",
"recSchedulingName": "Record Schedule 2"
},
{
"id": "3",
"recSchedulingName": "Record Schedule 3"
}
]
.js
console.log($('[name="duallistbox_demo1[]"]').val());
I am getting only this:
["object:326"]
I need to show the id or recSchedulingName here.
the code you have written console.log($('[name="duallistbox_demo1[]"]').val()); is a node js code. This is not compatible with angualrjS.
All data you can get from object ng-model="recSchedule". You can put this object in a foreach and see the values.
Related
Still in my very first days with Angular and ran into a problem i can't get my head around.
What I am trying to accomplish is sort of creating a way to have a persons name added to a message template.
The templates are loaded from a file like this
this.http.get('../../assets/templatefiles/customtemplates.json').subscribe(data => {this.templateArray = data as any [];
The structure of the JSON file is as follows
[{
"Id": 1,
"Type": "SR Templates",
"Name": "Message 1",
"Body": "Some meaningful text here"
},
{
"Id": 2,
"Type": "SR Templates",
"Name": "Message 2",
"Body": "Some more meaningful text here"
},
{
"Id": 3,
"Type": "GTFO Templates",
"Name": "Message 3",
"Body": "Guess what? Exactly, some even more..blahhh"
}]
All good so far. Then, in my template I use ng-select to create the dropdown list to display the options grouped by Type
<ng-select [items]="templateArray"
bindLabel="Name"
bindValue="Body"
groupBy="Type"
[(ngModel)]="selectedTemplate"
>
<ng-template ng-optgroup-tmp let-item="item">
<strong>{{item.Id}}</strong>
</ng-template>
</ng-select>
So far...working it seems. Templates are grouped by Type and show up in the drop down just fine.
Below the selection is a textarea in which the "Body" value is supposed to be displayed. Works fine as well, when selecting a template from the drop down the text shows fine in the textarea.
The problem I am facing is that there is an input field for the persons name the message will be send to.
I get the name as follows:
<input type="text" [(ngModel)]="srcName" class="form-control" placeholder="Name">
The bit confusing me is how to get/add the persons name to the message using interpolation?
I was hoping for something like just having to change the text in the JSON and adding the interpolation to it but apparently that does not work hehe.
{
"Id": 1,
"Type": "SR Templates",
"Name": "Message 1",
"Body": "Dear {{srcName}, Some meaningful text here"
}
I've been searching up and down, but am ultimately stuck and am desperate for a nudge in the direction I would have to go to actually get that name inserted in the textarea together with the template from the array...
You can make a function that concatenates your selected template and the name in you input, like so:
onSubmit() {
this.message = `Dear ${this.srcName}, ${this.selectedTemplate}`;
}
And then you can add a button that executes this function:
<button (click)="onSubmit()">Submit</button>
Now whenever you select the template you want and add the name you want to the input and click on submit button, you will get a concatenated message with the info you want.
Here is a live demo if you want more explanation.
In the live demo a used a normal HTML select, but it should work the same with angular material select.
##EDIT
If you need to put your srcName inside of your templates body, you will have to create a place holder in your template's body, something like:
"Guess what? Exactly {srcName}, some even more..blahhh"
instead of:
"Guess what? Exactly, some even more..blahhh"
Then you will have to change the onSubmit function:
onSubmit() {
this.message = this.selectedTemplate.replace('{srcName}', this.srcName)
}
I also added the changes to to the live demo.
I have a dropdown and I want to display a value based on the dropdown selection in Angular. I am using ng-options and figure a simple data binding should work, but the data binding isn't showing up. Here's a plunker: http://plnkr.co/edit/IptAt3e5EZi15OObfWFr?p=preview
<select ng-model="defcom"
ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >
</select>
<select ng-model="defcust"
ng-options="opt.Customer as opt.Customer for opt in cust_info | filter: {Com: defcom}: true">
</select>
<p>{{ cust_info.Name }}</p>
in the controller:
$scope.cust_info = [
{
"Customer": "1",
"Com": "1",
"Name": "First Name"
},
{
"Customer": "2",
"Com": "1",
"Name": "Second Name"
},
{
"Customer": "3",
"Com": "4",
"Name": "Third Name"
}];
{{cust_info[defcust-1].Name}} should work as expected
In this line:
{{cust_info.Name}}
you are trying to reference Name incorrectly, you have an array of objects which each have Name therefore that will not work.
Change it to:
{{cust_info[defcust - 1].Name}}
-1 because "Customer" starts at 1 and not 0
and you will get the nth index inside cust_info, where the nth index was selected by the user and stored into defcust.
http://plnkr.co/edit/WHkijq8ea0ATnO4JXnc9?p=preview
Without using the index to achieve this needs a little more javascript in there I guess.. I've added some. Hope this helps.. See this demo
<select ng-model="defcom" ng-change="change_acc(defcom)"
ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >
</select>
<select ng-model="defcust" ng-change="change_cust(defcust)"
ng-options="opt.Customer as opt.Customer for opt in cust_info | filter: {Com: defcom}: true">
</select>
http://plnkr.co/edit/pf6PtOWANfLxulQupqZq?p=preview
I have the following data (provided from an Angular service, stored in the controller) I need to use to populate a drop-down, and also select the default value. When the page renders, the first dropdown option is "?" and is selected by default. The second dropdown option is "Name 1".
I've read around and tried different things, so I'm wondering if this is caused the track by being based on an id field with a different name (id vs. otherId)? Any ideas?
For the dropdown:
{"someDataSet":
[
{"id": "1", "name": "Name 1"},
{"id": "2", "name": "Name 2"}
]
}
For selecting the default value:
{"otherDataSet":
{"otherId": "1", "otherName": "Name 1"}
}
My front-end code:
<select ng-options="someData.name for someData in controller.someDataSet
track by someData.id" ng-model="controller.otherDataSet.otherId"/>
Thanks!
Check this solution: http://codepen.io/tzach/pen/LVKeGJ
Adding an option element will set the default value until your real data is loaded:
<option value="{{ controller.otherDataSet.otherId }}">{{ controller.otherDataSet.otherName }}</option>
I'm having data in the form given below
var servers = [
{
"name": "server1",
"version":
[
"10.x"
]
},
{
"name": "server2",
"version":
[
"1", "2"
]
}
]
I want to have two drop down.
First dropdown will display "name".
When user selects name from the first dropdown, second dropdown should be populated with corresponding "version".
Non-working jsfiddle link: http://jsfiddle.net/fynVy/174/
You need to tweak your HTML template, so that the first drop down is displaying the server name, and that the options for the 2nd drop down are based upon the versions in the selected drop down (ngModel of the first drop down).
<div ng-controller="MyCntrl">
<select ng-model="server" ng-options="x.name for x in servers"></select>
<select ng-model="version" ng-options="val for val in server.version"></select>
</div>
working fiddle here
Hello community been stuck on this one for a while...
Scenario:
I have a dropdownlist which I pre-populate with values fetched from a service.
Now that same object returned from the service lets me know the value that needs to be pre-selected for that dropdownlist. The service returns a JSON object with all this information.
Sample JSON Returned from service
{
"stepsInvolved": [{
"label": "Step 1",
"value": "Step 1"
}, {
"label": "Step 1",
"value": "Step 1"
}, {
"label": "Step 1",
"value": "Step 1"
}],
"valueSelected": {
"label": "Step 1",
"value": "Step 1"
}
}
Question
Using Angular I'm assigning the dropdown list values from stepsInvolved into a scope variable $scope.options thats pretty straight forward.
How do I preselect the value on the dropdownlist with the value indicated in the "valueSelected" from the JSON object? How do you accomplish this with angular?
JSFiddles and Plunkers are welcome.
P.S : Obviously this doesn't work for this scenario
$scope.options= stepsInvolved;
$scope.selectedOption = $scope.options[1];
Give value to your model in select tag
In your controller asign
$scope.selectedValue = 'Step 1'; //your selected value, assign it in any way you wish
$scope.stepsInvolved = response['stepsInvolved'];
I am assuming your object is assigned to "response"
<select ng-model='selectedValue' ng-options="item.value as item.label for item in stepsInvolved"></select>
ngSelected is the directive of choice: http://plnkr.co/edit/dGJWityhYUZd9Ht6VgSJ?p=preview