I'd like to create a nested ng-repeat that allows me to include all questions in all chapters of a survey JSON in a dropdown <select> menu. What's the "right way" to do this? I could see creating an array just for this particular use case, but would rather not do that.
<select class="form-control" ng-model="chapter.jumpId">
<span ng-repeat="chap in survey.chapters">
<option ng-repeat="question in chap.questions" value="question.verbose">
{{ question.id }}
</option>
</span>
</select>
Html:
<select ng-repeat="chap in survey.chapters">
<option ng-repeat="question in chap.questions" value="question.verbose">
{{ question.id }}
</option>
</select>
-----
<select>
<option ng-repeat="sOption in sOptions" value="sOption.verbose">
{{ sOption.id }}
</option>
</select>
Js:
$scope.survey = {
"chapters" : [
{
"questions" : [
{
"verbose" : "que1_verbose1",
"id": "que1_1"
},
{
"verbose" : "que1_verbose2",
"id": "que1_2"
}
]
},
{
"questions" : [
{
"verbose" : "que2_verbose1",
"id": "que2_1"
},
{
"verbose" : "que2_verbose2",
"id": "que2_2"
}
]
}
]
};
$scope.sOptions = [];
angular.forEach($scope.survey.chapters, function(chapter) {
angular.forEach(chapter.questions, function(question) {
$scope.sOptions.push(question);
});
});
http://jsfiddle.net/9bc06fdv/27/
Related
I'm working with Vue 3 and Bootstrap 5.
I have a select with multiple options. Now I'm displaying my option.TEXT and this value will also be passed into my methods when I change something. But I want to pass the key (option.ID) when I change something.
But I also want my v-model to be my option.ID but displaying my option.TEXT.
How can I achieve this without checking it in the methods itself.
SELECT:
<select class="form-select" v-model="value" #change="get_key()">
<option v-for="option in options" :key="option.ID">
{{ option.TEXT }}
</option>
</select>
OPTIONS ARRAY:
[
{ "ID": 1,
"TEXT": "One"
},
{ "ID": 2,
"TEXT": "Two"
},
{ "ID": 3,
"TEXT": "Three"
},
]
The option attribute value should be bound to the option.ID :
<select class="form-select" v-model="value" #change="get_key()">
<option v-for="option in options" :key="option.ID" :value="option.ID">
{{ option.TEXT }}
</option>
</select>
I'd like to have two select boxes for users to mention their location data.
When user chooses the province Bar from the first select box, the second selct box should be populated with the cities of the province:
Here is the json data:
Provinces: [
{
"Province": "Foo",
"Cities": [
{
"name": "Fooland"
},
{
"name": "Fooville"
}
} ,
{"Province": "Bar",
"Cities": [
{
"name": "Barland"
},
{
"name": "Barville"
},
{
"name": "Barak"
}
}
]
The province select box works fine:
<select v-model="province">
<option v-for="(p, index) in provinces" :key="index" >{{ p.Province }}</option>
selected: {{province}},
</select>
But I can not get the cities of Bar in the second select box:
<select v-model="city">
<option v-for="(c, index) in provinces.province.Cities" :key="index">{{ c.name }}</option>
</select>
Appreciate your hints on how to fix this?
TLDR: Change the first <select>'s value to be the selected province object (which contains Cities), and use that value to populate the second <select>'s options.
The value of <select> is the value of the selected <option>. if you don't explicitly specify a value for an <option>, the default value is the <option>s inner text (standard behavior). So, you can assign a value that is different from the <option> label, and the value can be an object:
<option :value="myOptionValue">My Option Label</option>
Thus, you can assign the underlying province object model (i.e., p in this case) to the <option>s in the provinces <select>:
<option :value="p" v-for="(p, index) in provinces">
Notice the :value="p", where p is the province object, containing Cities.
After selecting the province, province can be used in the cities <select> to populate its <options> with city names:
<select v-model="city">
<option v-for="(c, index) in province.Cities" :key="index">{{ c.name }}</option>
</select>
const Provinces = [
{
"Province": "Foo",
"Cities": [
{ "name": "Fooland" },
{ "name": "Fooville" }
]
},
{
"Province": "Bar",
"Cities": [
{ "name": "Barland" },
{ "name": "Barville" },
{ "name": "Barak" }
]
}
];
new Vue({
el: '#app',
data() {
return {
province: '',
city: '',
provinces: Provinces
}
},
watch: {
province(newValue) {
// reset city when province changes
this.city = '';
}
}
})
<script src="https://unpkg.com/vue#2.5.17"></script>
<div id="app">
<select v-model="province">
<option value="" disabled>Select province</option>
<option v-for="(p, index) in provinces" :value="p" :key="index">{{ p.Province }}</option>
</select>
<select v-model="city" :disabled="!province">
<option value="" disabled>Select city</option>
<option v-for="(c, index) in province.Cities" :key="index">{{ c.name }}</option>
</select>
</div>
i'm trying to get the selected option of a user task.
myresult
what my expected result is like this expected
Here is my Html code
<div class="form-group has-float-label">
<input v-model="form.name" type="text" name="name" placeholder="Name" class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<select name="tasks" v-model="form.tasks" id="tasks" class="form-control" :class="{ 'is-invalid': form.errors.has('tasks') }">
<option disabled value="">Please select one</option>
<option v-for="t in alltask" :key="t"
v-bind:value="t" >{{t.name}}
</option>
</select>
<br />
{{form.tasks}}
</div>
Below is my JS code
<script>
export default {
data() {
return {
editmode: false,
users : {},
alltask : {},
form : new Form({
id: '',
name: '',
tasks: {},
})
}
},
methods: {
loadUsers(){
axios.get("/api/v1/users").then(({ data }) => (
this.alltask = data.alltask,
this.users = data.users
));
},
editModal(user){
this.editmode = true;
this.form.reset();
$('#users').modal('show');
this.form.fill(user);
}
},
created() {
this.loadUsers();
}
}
</script>
this is my json response
{
"users": [
{
"id": 1,
"name": "zxc",
"username": "zxc",
"tasks": [
{
"id": 1,
"name": "cooking"
}
]
},
{
"id": 2,
"name": "foo",
"username": "foo",
"tasks": [
{
"id": 2,
"name": "cleaning"
}
]
}
],
"alltask": [
{
"id": 1,
"name": "cooking"
},
{
"id": 2,
"name": "cleaning"
}
]
}
the value of v-model is the same with option value but i don't get it to get pre selected upon clicking update button, but if i change the option the v-model code that i put below the v-model itself is getting changed following the option list and i can update it to the db
The Problem is that you bind the whole object as value. Even though the object you receive from your call and the object you used to bind the value property to have the same "content" (props & values) they are not the same. So it will not be preselected.
What you actually should do is only bind the id of the task and if you want to display the result find the object that has the id from your alltask list
https://jsfiddle.net/eywraw8t/382079/
<select v-model="form.task">
<option>Please Select</option>
<option :value="t.id" v-for="(t, i) in alltask" :key="i">{{ t.name }}</option>
</select>
<p>
{{ selectedTask }}
</p>
As you only select one task I was wondering why you have "form.tasks" - for my example I changed it to singular.
The computed prop selectedTask could look like this
computed: {
selectedTask() {
return this.alltask.find(task => {
return task.id === this.form.task
})
}
}
I have a problem selecting an object from ng-model with ng-model-options and getter-setter function. I am binding to the ng-model getter-setter function setGetSelectedItem which has to accept an object from ng-options - in my case, item and to assign its properies to the properties of another object specific_data. It does, the object is passed correctly but I am not able to select the option in the select options.
<select name="item" ng-model="setGetSelectedItem"
ng-options="item as item.title for item in items"
ng-model-options="{getterSetter: true}">
<option value="">-- Please select --</option>
</select>
And in the controller:
$scope.items = [{
"description": "Item description",
"item_type": "OUT",
"id": 1,
"title": "Default item"
}];
$scope._objectDataRaw = {
specific_data: {}
};
$scope.setGetSelectedItem = function(value) {
if (arguments.length) {
$scope._objectDataRaw.specific_data.property_id = value.id;
$scope._objectDataRaw.specific_data.property_title = value.title;
$scope._objectDataRaw.specific_data.property_description =
value.description;
return $scope._objectDataRaw.specific_data;
}
};
Here is a jsfiddle with the problem:
Can not select the object
And I need it to pass it as an object, and not as object.property.
Any help would be greatly appreciated.
Instead of using the getterSetter option, use the ng-change directive to set the specific_data object:
<select name="item" ng-model="selectedItem"
ng-options="item as item.title for item in items"
̶n̶g̶-̶m̶o̶d̶e̶l̶-̶o̶p̶t̶i̶o̶n̶s̶=̶"̶{̶g̶e̶t̶t̶e̶r̶S̶e̶t̶t̶e̶r̶:̶ ̶t̶r̶u̶e̶}̶"̶
ng-change="setSelectedItem(selectedItem)" >
<option value="">-- Please select --</option>
</select>
The DEMO
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.items = [{
"description": "Item description",
"item_type": "OUT",
"id": 1,
"title": "Default item"
}];
$scope._objectDataRaw = {
specific_data: {}
};
$scope.setSelectedItem = function(value) {
$scope._objectDataRaw.specific_data.property_id = value.id;
$scope._objectDataRaw.specific_data.property_title = value.title;
$scope._objectDataRaw.specific_data.property_description =
value.description;
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select name="item" ng-model="selectedItem"
ng-options="item as item.title for item in items"
ng-change="setSelectedItem(selectedItem)" >
<option value="">-- Please select --</option>
</select>
<hr>
_objectDataRaw={{_objectDataRaw}}
</body>
I think your code should be:
angular.module('myApp', [])
.controller('Ctrl1', function($scope) {
$scope.items = [{
"description": "Item description",
"item_type": "OUT",
"id": 1,
"title": "Default item"
}];
$scope._objectDataRaw = {
specific_data: {}
};
$scope.setGetSelectedItem = function(value) {
if (arguments.length) {
$scope._objectDataRaw.specific_data.property_id = value.id;
$scope._objectDataRaw.specific_data.property_title = value.title;
$scope._objectDataRaw.specific_data.property_description = value.description;
return $scope._objectDataRaw.specific_data;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl1">
<div>
<select name="item" ng-repeat="item in items">
<option value="">-- Please select --</option>
<option value="" ng-click="setGetSelectedItem(item)">{{item.title}}</option>
</select>
</div>
</div>
I have the following select option :
<select ng-model="class_name" name="class_name" class="form-control">
<option ng-repeat="t in MemberClass" value="{{t}}">{{t.class_name}}</option>
</select>
I want to set default option MemberClass[0] to select option. I tried the following code but not working.
The JSON data is coming from Webservice...
//To fetch Member Class
$http.get('http://192.168.1.6:8080/apartment//member/class/list').then(function(response) {
$scope.MemberClass = response.data.list;
$scope.class_name = $scope.MemberClass[0]; // Not working
});
Member class JSON data is :
[
{
"class_id": 1,
"class_name": "Owner",
"class_details": "DCE"
},
{
"class_id": 7,
"class_name": "Staff "
},
{
"class_id": 10
"class_name": "Vendor"
}
]
Plunker sample : https://plnkr.co/edit/vVcrmOREkcVBBM2Ynhgv?p=preview
(Am getting error if I not select any option...)
You can utilize ng-options for this. It is the preferred way most of the times. Like this:
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
Now, since you have $scope.class_name assigned as default value, it will be selected already.
working example
Use ng-init. Try like below.
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="Ctrl">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="form-group">
<label class="control-label col-md-3">Member Class </label>
<div class="col-md-4">
<select ng-model="class_name"
ng-init=" class_name = MemberClass[0]" name="class_name" ng-options="t as t.sub_class_name for t in MemberClass">
</select>
<p>Selected Value: {{class_name}} <p>
</div>
</div>
<button type="submit" ng-click="alertdata()">Save</button>
<script>
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
var MemberClass;
$scope.MemberClass = [{
"sub_class_id": 1,
"sub_class_name": "Primary"
},
{
"sub_class_id": 2,
"sub_class_name": "Secondary "
},
{
"sub_class_id": 3,
"sub_class_name": "Dependent "
},
{
"sub_class_id": 4,
"sub_class_name": "Sub Member"
},
{
"sub_class_id": 5,
"sub_class_name": "None"
}
]
// $scope.class_name = $scope.MemberClass[0];
$scope.alertdata = function() {
$scope.class_name = "{}";
var parameter;
parameter = {
"member": {
"first_name": "first_name",
"role": [{
"role_id": 4
}],
"associated": "associated",
"class0": [JSON.parse($scope.class_name)],
"contect": [{
"intercom": "intercom"
}],
"individualdetails": [{
"gender": "gender"
}]
},
"address": [{
"street_address_1": "street_address_1"
}]
}
console.log(JSON.stringify(parameter));
};
});
</script>
</body>
</html>
You should definitly use ng-options for this
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
To set a default, either set the $scope.class_name to a value of the MemberClass array or you can add an empty option tag as below which will be selected when the $scope.class_name is null
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
<option value="">Select value</option>
</select>