I have two fields.
Workshop | Participation Status
Workshop is a list of workshops that have been conducted. Whereas Participation Status Shows the Participant Status i.e Participated, Not-Participated, Guest Etc. For each Workshop there is a select box showing the possible participation status. The List of Workshop is dynamic.
So A typical row would be like
<input type="checkbox" v-model="workshop_attended">Workshop 1
<select v-model="participation_status">
<option value="P">Participant</option>
<option value="G">Guest</option>
<input type="checkbox" v-model="workshop_attended">Workshop 2
<select v-model="participation_status">
<option value="P">Participant</option>
<option value="G">Guest</option>
And So on.
In my Script I am using CDN btw.
<script>
var vm=new Vue({
el:'#app'
})
So if someone selects a workshop then they select their Participation Status. I want to store the Workshop and the status in a structure given below.
this.workshops.push({workshop:"Workshop 1", status:"P" }
However i am having problems going about it. Since all Select Boxes are bound to the same model, a change in one triggers a change in all. I want to add the info to workshops object as soon as a particular workshop is selected and participation status selected. I am having trouble going about it.
I am new to Vue and am using CDN without the Single Page Application stuff.
Thanks in Advance.
https://jsfiddle.net/zeenux/peL9acfh/7/#&togetherjs=0Qeqn23QRj
You said that you have a dynamic list of workshop.
Iterate on it then :
<div v-for="(workshop, index) in workshops" :key="index" >
<input type="checkbox" v-model="workshop.selected">
{{workshop.name}}
<select v-model="workshop.status">
<option value="P">Participant</option>
<option value="G">Guest</option>
</div>
Instead of using v-model for the checkbox, maybe you should bind a function to #input that push when true, and splice when false
Related
I have a form where I use select options. This component is to add Jobs and you can select a Client which contains a Client Name, Address, Telephone and Fax (you add those from the Client page) OR you can manually add it on the specific job.
When there are Clients in the list you can select the client and it will automaticly fill the client phone, fax and address but I don't know how to pass my entire client from the NgFor back to the controller. What I tried so far is to put the option in an NgModel and on the select Change find the correct client in the array that is equal to that ngModel value but Im sure there is a better way to do that ?
<select *ngIf="!manualClient" name="clientName" (change)="fillClientValues()" id="clientNameSelect" formControlName="clientName" class="form-control">
<option *ngFor="let client of allClients" [(ngModel)]="selectedClient" value="{{client.name}}">{{client.name}}</option>
</select>
If I could pass the client from ngFor it would be much easier.
You have two options:
1.
<select *ngIf="!manualClient" name="clientName" (change)="fillClientValues();onClick($event)" id="clientNameSelect" formControlName="clientName" class="form-control">
<option *ngFor="let client of allClients; let i = index;" value="i">{{client.name}}</option>
</select>
2.
<select *ngIf="!manualClient" name="clientName" (change)="fillClientValues($event)" id="clientNameSelect" formControlName="clientName" class="form-control">
<option *ngFor="let client of allClients; let i = index;" value="i">{{client.name}}</option>
</select>
From the event object you can extract the index. I would suggest the second option is the better one. In my experience calling functions from templates are expensive.
cheers
I've been dealing with this problem for a long time. I currently have a function called "add ()" that allows me to add items to an array that feeds a dropdown and text fields. Every time I add a new item to the array, I add it empty:
$scope.aAnimals.push({"animal": ""})
This causes a problem with the dropdown, since the value of "animal" is equal to ""
<Option style="display: none" value=""> Select an animal </option>
Then the item is not added. Both "animal" and the dropdown value of the first option are empty strings. If you add a value for "animal", other than "" here it would work and would be added to the dropdown.
What I can do? I want the generated text fields to be empty, and the dropdown adds the item.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' value={{item.animal}} class='animal' />
</div>
$scope.obj = {}
$scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]
$scope.add=function(){
$scope.aAnimals.push({ "animal": ""})
}
http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview
Let me verify what you need.
When the user click on the Add button, a new empty text box will be create in the page and a new empty option will be create in the drop down. When the user change the value in the text box, the drop down option will change.
In this case your need to modify the code like this.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' class='animal' ng-model='item.animal' />
</div>
I removed track by opt.animal like Pankas said, and added ng-model='item.animal', also don't need value={{item.animal}} since we use AngularJS 2-way binding.
Your code is working perfectly, just remove display none in option
<option value="">Select an animal</option>
I seen you are using jquery in Save functionality. We have jqlite in built in angular. Please check below code for save.
var length = $scope.aAnimals.length;
$scope.aAnimals[length-1].animal =
angular.element(document).find('.animal').eq(length-1).val();
When a user logs in to my app, it loads the previous UI setup that they were using. To switch between interfaces there is a dropdown that lists all the options that specific user is authorized to use.
I would like the selected option in that list to reflect the previous UI when the page is loading but I'm having trouble coming up with how to set the selected <option>
Here is some example code:
//User object from DB
var user = {
username: admin,
previousUI: 'Build',
authorizedUI: [{title:'Default'}, {title:'Edit'}, {title:'Build'}]
}
html:
<form class="navbar-form">
<label>System: </label>
<select (change)="systemSelect($event.target.value)">
<option *ngFor="let system of user.authorizedUI" [value]="system.title">
{{system.title}}
</option>
</select>
</form>
In Angular2 how do I set the selected parameter on the option to reflect user.previousUI?
I tried adding this:
<option *ngFor="let system of user.authorizedUI" [value]="system.title" [selected]="system.title === user.previousUI">
But that didn't seem to do it.
One way would be
<select [ngModel]="user?.previousUI" (change)="systemSelect($event.target.value)">
So I have an AngularJS form with a select option to create an restaurant in my DB;
<div id="name-group" class="form-group" ng-init="getClasses();">
<div class="select-wrapper">
<label for="location">Resaurant Class</label>
<select name="class" ng-model="formData.class" ng-options="class.id as class.name for class in classes track by class.id">
<option value="">-- Select Class --</option>
</select>
</div>
</div>
From the above, I'm getting the classes and then listing them. Because I have track by class.id it means I can have a default option as it doesn't have a value. All good here.
Now to edit this restaurant, I retrieve it from the DB and it will have whatever class I have saved for it from the above form. This is the id of the restaurant class.
So restaurant.restaurant_class_id = class.id
Now when I retrieve the restaurant, using the code below I'm able to load the form and the restaurant class will be selected correctly;
<div id="name-group" class="form-group" ng-init="getClasses();">
<div class="select-wrapper">
<label for="location">Resaurant Class</label>
<select name="class" ng-model="restaurant.restaurant_class_id" ng-options="class.id as class.name for class in classes track by restaurant.restaurant_class_id">
<option value="">-- Select Class --</option>
</select>
</div>
</div>
Notice the track by restaurant.restaurant_class_id. This is the desired behaviour.. Load the form, load the restaurant, load the restaurant classes, and automatically set the corresponding restaurant class in the dropdown.
Now the problem is when I then want to select another restaurant class for the restaurant. This results in an undefined value.
If I remove track by restaurant.restaurant_class_id and replace it with track by class.id two things happen;
The restaurant class is not selected. So I end up with -- Select Class -- displayed which is the default
If I select a restaurant class from the drop down then the value is set correctly.
I'm using ng-inspector to check what value is being set on the $scope
So I guess my question is how can I select the correct restaurant class based on what is retrieved from DB and be able to change it without getting undefined value.
Any guidance from Angular gurus appreciated.
Yes. Db value automatically selected by model. Check whether u have another issue
I have an ng-repeat that creates a table of data. Each entry has several properties, including IP Address, MAC Address, author and more. I have a textbox that automatically sorts IP address, but I also want to provide a dropdown that allows users to select which property they would like to filter by.
For example, the default behavior is that by typing "12" into the box, only entries with "12" in the IP Address will be displayed. But if the user selects "Author" from the dropdown and types "Mark" into the textbox, only entries with "Mark" as the author will be displayed.
I tried setting the textbox's ng-model to "selectFiler.value" but that didn't work.
<form>
<select ng-model="selectFilter">
<option value="incident_at">Incident Date</option>
<option value="ip_addr" selected="selected">IP Address</option>
<option value="mac_addr">MAC Address</option>
<option value="created_at">Created On</option>
<option value="author">Author</option>
<select>
<input type="text" placeholder="Search by IP" ng-model="filterTable.ip_addr">
</form>
Here's some code, but because I'm using ui-router and templates for the full project I can't get the data to display in Plunker:
http://plnkr.co/edit/kNqx1g3HidEM0ORzsSJt?p=preview
How can I make this work?
Try using typeahead from angular-bootstrap library.