<template>
<select class="form-control mt-1" #change="selectUser">
<option >select user</option>
<option v-for="(user, index) in users" :key="index" {{user.first_name}}</option>
</select>
</template>
<script>
selectUser(event){
if(event.target.selectedIndex != 0){
this.index = event.target.selectedIndex-1
this.selectedUsers.push(this.users[this.index])
this.users.splice(this.index, 1)
}
}
</script>
The idea of this script is that when you select an option it gets removed and added to another array of objects and it disappears from the select list.
I want when this happened, the first option to get selected back again.
You can use v-model to get the selected item from <select>
<select v-model="selected">
......
</select>
and then use it this way:
<span>Selected: {{ selected }}</span>
The best way is to have :
a options and a selectedOption in the data.
A availableOptions as computed options, with options.filter(o => o !== this.selectedOption)
Bind the select with a v-model=selectedOption
bind the with the avaiableOptions
Related
Trying to set a default value to a simple select input with "selected" doesn't work.
I am making a blog in Vue.js and the blog posts can be assigned to different categories. However, when editing a post, I want the select input to have a default value if the post is already inside a category. The pseudo-code would look like so: "if category.id equals post.category.id".
This is my input:
<label>
<VeeValidateField name="post_category" as="select">
<option value="" disabled>Set to folder</option>
<option value="0">none</option>
<option v-for="category in categories"
:key="category.id"
:value="category.id"
:selected="category.id === post.category.value"
>
{{ category.category_name }}
</option>
</VeeValidateField>
</label>
Although there can be a default value with a multiple select input, that is not my use case.
Is this a bug or am I doing something wrong?!
Thank you!
I solved this by using v-model and setting the value in data to the following expression:
data() {
return {
categoryValue: this.$props.login ? this.$props.login.login_category.value : ""
}
}
and this is the markup:
<label>
<VeeValidateField v-model="categoryValue" name="login_category" as="select">
<option value="" disabled>Set to folder</option>
<option value="0">none</option>
<option v-for="category in categories"
:key="category.id"
:value="category.id">
{{ category.category_name }}
</option>
</VeeValidateField>
</label>
So when the property categoryValue evaluates, the select input either gets a default value or none at all.
In the below code I have a value and that is an object how to can I push to the exist array.
methods: {
onChange(event) {
this.newItems.push(event.target.value);
console.log(event.target.value);
}
}
and my blade is:
<select #change='onChange($event)' class="form-control">
<option value="" selected disabled>Choose</option>
<option v-for='item,key in items' :value="item">#{{ item.name }}</option>
</select>
I would suggest using v-model on the select to detect which is currently selected.
<div id="app">
<select #change="onChange" class="form-control" v-model="selected">
<option value="" selected disabled>Choose</option>
<option v-for='item,key in items' :value="item">#{{ item.name }}
</option>
</select>
<p v-for="newItem in newItems">
{{newItem}}
</p>
</div>
and then push this.selected in your onChange method instead:
this.newItems.push(this.selected)
Hope this helps.
Working fiddle of your code with some small modifications:
https://jsfiddle.net/MapletoneMartin/e4oth98p/7/
I have a list made with ng-repeat with options. I'm trying to make it so that when I click an option, the value of the selection will be passed to an object.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" >
<option value="1" ng-repeat="t in klas" ng-model="vakselect">{{ t.Name }}</option>
</select>
$scope.user = {
vak: klas.vakselect,
};
I have small experience with Angular, so I'm not sure how to make it work correctly.
Edit:
I have adjusted my code and user.vak does seem to catch the selectvak field, but now passes it as an array. How do I make it so it's a string in $scope.user? So whenever I log user, I will see a string of vak and then an array of students.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" ng-model="user.vak" ng-options="t.Name as t.Name for t in klas" ng-click="getJSON1()">
$scope.user = {
vak: '',
// klas: klasselect,
student: [$scope.student] -1
};
TLJ and Arnaud are correct.
But answering your initial question, in the select tag, instead of ng-model="vakselect" just use ng-model="user.vak".
Then, when the value of the select changes, the value of user.vak will change automatically.
real code is this : (and nothing to do inside the controller.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" ng-model="user.vak">
<option value="1" ng-repeat="t in klas">{{ t.Name }}</option>
</select>
And you should use ng-options instead of ng-repeat to create your options
https://docs.angularjs.org/api/ng/directive/ngOptions
This will add t.name to an array when you click the option. Take a look at the controller function and the ng-click in the partial.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" >
<option value="1" ng-repeat="t in klas" ng-click="add(t.Name)" ng-model="vakselect">{{ t.Name }}</option>
</select>
var string_option;
$scope.add = function(t) {
string_option = t;
console.log(string_option )
}
I have a project requiring that I build an angular menu with multiple drop down filters. As the end user selects one filter the other two filters update accordingly. I already learned the hard way not to use the ng-repeat with options and now for the life of me cannot figure out how to get my select fields in the view to reflect changes that will be caused by events in the view.
Here is my html:
<div class="large-8 columns" ng-controller="democontroller" >
<label> Demographic
<select ng-options = "x.demo as x.demo for x in groups | filteredDemo" ng-model = "demoValue">
<option value="">Please Select A Group</option>
</select>
</label>
<label> Location
<select ng-model = "locationValue" ng-options = "x.location as x.location for x in groups ">
<option value="">Please Select A Location</option>
</select>
</label>
<label> Days
<select ng-model = "dayValue" ng-options = "x.days as x.days for x in groups " >
<option value="">Please Select A Meeting Day</option>
</select>
</label>
</div>
<div class="large-8 columns">
<p>
</p>
</div>
</div>
and here is my current javascript:
var app=angular.module('selectapp',[]);
app.controller('democontroller',['$scope','$http',function($scope,$http){
$http.get("jsoninfo.php").success(function(response){$scope.groups=response;});
$scope.currentValues = ['1','0','0'];
app.filter('filteredDemo', function(){
return function(e){
if(e == 1){
return e;
}
}
});
}]);
any help would be greatly appreciated.
I'll try to explain the howto with two levels (group and location). Adding levels should be obvious after that.
ng-model value of the first select list will hold the selectedGroup
ng-model value of the second select list will hold the selectedLocation
In ng-options, We must select the full object, but we will diplay only the name. Thus we will have ng-options="group as group.name for group in groups". We select the full object because in the dependent dropdown, we will iterate over the nested collection, here selectedGroup.locations
<label>Demographic
<select ng-model="selectedGroup" ng-options="group as group.name for group in groups">
<option value="">Please Select A Group</option>
</select>
</label>
<label>Location
<select ng-model="selectedLocation" ng-options="location as location.name for location in selectedGroup.locations">
<option value="">Please Select A Location</option>
</select>
</label>
Here is a demo fiddle I've made with dummy data.
I am using angular js to draw select boxes.
<select ng-model="selected">
<option value="{{obj.id}}" ng-repeat="obj in values">{{obj.name}} </option>
</select>
selected id - {{selected}}
Here the default selected is not initialized according to value selected.
Have made a fiddle for the problem.
You should use ngOptions directive to render selectbox options:
<select ng-model="selected" ng-options="obj.id as obj.name for obj in values"></select>
Fixed demo: http://jsfiddle.net/qWzTb/1984/
case 2 is updated in this plunker
http://jsfiddle.net/26yjn8ru/
<div ng-repeat="arr in itr">
<select ng-model="arr.id"
ng-options="value.id as value.name for value in values">
</select>
Just add ng-selected="selected == obj.id" in the option tag
<option value="{{obj.id}}" ng-repeat="obj in values" ng-selected="selected == obj.id" >
{{obj.name}}
</option>
Correct Way would be like :
<select id="select-type-basic" [(ngModel)]="status">
<option *ngFor="let status_item of status_values">
{{status_item}}
</option>
</select>
Value Should be avoided inside option since that will set the default value of the 'Select field'. Default Selection should be binded with [(ngModel)] and Options should be declared likewise.
status : any = "Completed";
status_values: any = ["In Progress", "Completed", "Closed"];
Declaration in .ts file