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)">
Related
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
I am new to Angular and Mongo, and am hoping to use Angular js to pull data from a Mongo database to populate a div on a single-page website I'm building. What data is pulled will depend on what option a user selects in a dropdown option on a form. There are a Lot of options out there for Angular, and I was hoping that someone with more experience with it could point me in the right direction. Below are the relevant bits of my code:
<body ng-app="">
<div id='ad'> </div><!-- to be populated with data from MongoDB -->
<select id='climateZone' ng-model="zone" >
<option value="z3">3</option>
<option value="z4">4</option>
<option value="z5">5</option>
<option value="z6">6</option>
<option value="z7">7</option>
<option value="z8">8</option>
<option value="z9">9</option>
<option value="z10">10</option>
</select>
<button id='Go'><h2>Go!</h2></button>
I want it so that when a user selects one of these options, and presses the 'go' button, the 'ad' div will be populated with option-specific information from the database.
I hope that's all clear; any help is appreciated!
As far as I know you can't make HTTP request directly to MongoDB. Instead you need a server-side implementation that communicates with the database for you. If you are using Node for the back-end you can take a look on Mongoose: http://mongoosejs.com/
Mongoose is one of the many libs for MongoDB, you define you models, make queries, post data, and so on. Let's say I want to get the data based on a parameter. At first you need a model for your data:
var Cat = mongoose.model('Cat', { name: String });
Then you can start operating on top of the DB connection. The example bellow should bring you all cats named "Toddy":
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/myDB');
Cat.find({name: 'Toddy'}, function (err, result) {
if (err) return console.error(err);
console.log(result);
});
That said, you can use the ngChange and ngModel directives to put the value of the combo on a variable and react properly when it changes, like so:
<select id='climateZone' ng-model="zone" ng-change="loadData()">
<option value="z3">3</option>
<option value="z4">4</option>
<option value="z5">5</option>
<option value="z6">6</option>
<option value="z7">7</option>
<option value="z8">8</option>
<option value="z9">9</option>
<option value="z10">10</option>
</select>
Being both "zone" and "loadData()" members of your $scope.
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 got an interface, already logged in with a new username now I want so select this user to my selected option value and insert it into Mysql DB:
<select name="name" class="form-control" required="required">
<option value="" required="required"> Please select </option>
<option value="Rifadije Mavriqi"> Rifadije Mavriqi </option>
<option value=" <?php
?>"></option>
<option value="Merdiana Leci"> Merdiana Leci </option>
</select>
Let say that your working with CronJobs that every X minutes check whos online, than select the column where online=1 with simple while and you got it.
Okay, i dont know if you ever work with cronjobs, thats really easy, via your cpanel/direct admin you pick up a file and set-up every x time the server will run this file. Let call this file cronj.php and there write a query that set all the online colum to 0 ( than unactive users resets) and close the file. I will add in a config or header file a query that check if this is user or unregister guy , if register lets set online colum to 1. And now via your control panel write select query with while that show you where online=1 and show you by the online colum the user names that online right now.
I am using play framework for the first time.
I want to update the web page when a value is selected from drop down with out refreshing the web page.
Consider the following example:
<select>
<option value= "Apple"> Apple </option>
<option value = "Banana"> Banana </option>
</select>
When a value is selected from drop down it should be posted to server. Then server should return some information based on the value it got. Now we should display the content corresponding to the value selected from drop down with out page refresh.
I didn't find a way to implement this using play framework. Conventionally we can do this by hiding a div initially and when a value is selected from drop down we can add content (fetched from back end) to the div and show it. I didn't understand how to implement the server side part. In play framework, controller generally returns Result type. How to return a Json value on a request in play framework ?
Can anyone please suggest other ideas ??
Thanks
A solution using jQuery (see change() and load()):
<select id="select">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
<div id="result"></div>
<script>
$('#select').change(function() {
$('#result').load('/foo/bar?fruit=' + $(this).val());
});
</script>
EDIT: To address the JSON/server-side part of the question have a look at ScalaJsonHttp (or JavaJsonActions).