I am trying to show the initial value of a array of objects like this:
tableStyes[
{Id: 1, style: "blabla1},
{Id: 2, style: "blabla2"}
]
basicly i am using a computer method to give me the array from vuex store
tableStyles () {
return this.$store.getters.getTableStyles
},
i am doing the select this way:
<select class="form-control" v-model="table.tableStyle">
<option v-for="(item,key) in tableStyles" :value="item.Id">
{{ item.style }}
</option>
</select>
i want to get the value based on the id, i mean i want to get the text associated to the id, and the id is table.tableStyle, that is 1 at the begin that should be the selected item, but somehow it doesn't work :/.
Any help?
You need no computed method to display data from vuex store.
v-model="table.tableStyle" sets the first displayed item, if it is initialized with anything that is not included in the array, no item will be selected before you select one manually.
Try:
data:{
return {
...
table.tableStyle: this.$store.getters.getTableStyles[0]
}
}
I dont know if this works in data section.
Related
In web app I have a list of Expenses, which that if you press above it takes you to a new page to edit the selected Expense. When the user click on an element of list, I save the Object (the selected Expense) in a Global Object common in whole application and I retrieve it when I am in the Editing controller:
$scope.companySelected = GlobalApplicationData.selectedExpenseList;
The GlobalApplicationData.selectedExpenseList is an Object:
$$hashKey: "object:39"
_id: "33aa5549-7802-40d9-bc89-8780705b8c9b"
_rev: "3-eb940cb990524112723f711618e0cf51"
ad_table_id: 1000596
company_name: "Company 1"
data: Object
recordid: 1000005
__proto__: Object
In one expense there is only one company.
So, in this page of editing I have some field (input type text, date, etc). And I also have a selection with the list of the Companies of the logged user. To retrieve that list, I made this function:
$scope.getCompanyList = function() {
EditExpenseListSrv.getCompanyListDetail(user).then(function (companyListDetail) {
$scope.companyList = companyListDetail;
$scope.$apply();
}).catch(function (err) {
console.log(err);
});
};
CompanyListDetail is an array of Obejct:
companyListDetail: Array[5]
0: Object
1: Object
2: Object
3: Object
4: Object
And this is one example of those object:
_id: "44e620dc-e715-453f-882b-3f21aeef48fe"
_rev: "1-c09c9f3350e853e588f3358aaafc0374"
ad_table_id: 1000146
data: {
description: "text"
id_company: 513424
name: "Company 2"
}
recordid: 1000002
So the company of the selected Expense ($scope.companySelected) will definitely part of the list obtained by the query ($scope.companyList). But I want to give the user the possibility to change it.
So I would like to make a selection containing the list ($scope.companyList) and default already selected the Company corresponding to $scope.companySelected.
I've writter this, but it doesnt work:
<select class="selection" ng-model="companySelected"
ng-init="companySelected = globalApplicationData.selectedExpenseList"
ng-options="company
as company.data.name for company in companyList">
But it doesn't work. I can see in the selection all the Companies, but don't select the default value
When you are assigning a default value to the select, you need to assign the object, so it won't work, when assigned with the same data of some other object:
Note:
a) data is the array which is getting looped in the select list
b) selectedcountry is the model which is bind on select list.
Option 1:
Using ng-init:
<select ng-model="selectedcountry" ng-init="selectedcountry = data[0]" ng-options="item.name for item in data">
<option value="">Select</option>
</select>
Demo 1.
Option 2:
Assigning the default from the controller
$scope.selectedcountry = $scope.data[0];
Demo 2
You can try to do the initialisation in the controller:
$scope.companySelected = "the value that you want to set here"
Or you can try to put the ng-init inside the parent of the select. Once I had a problem like this and I solved it putting the ng-init in the parent tag. Example:
<div id="parent" ng-init="companySelected = globalApplicationData.selectedExpenseList">
<select ...>
</div>
Another idea would be to put companySelected inside an object. I have had some problems (I am not sure why) with the forms if I was using $scope.value inside the ng-value instead of using $scope.formData.value
Sup guys! I am trying to build a dynamic form, but I got stuck in a ngModel problem.
The idea is:
I got 2 arrays: one for temporary show to user selected info, and another that is which actually is saved on post (I have different types of data, so I have to do this way).
1- The user uses a <select> to choose a option. The selected option is a object inside a list. User hits the add link, and the selected option pop for him.
2- The selected option, has a custom property, that must be set before hit the add button. For that, a ´input´ pop when an option is selected. the ngModel for this is dynamically set, based on a object's property.
3- I need to get the input data, and save it inside a property of the object selected on the list.
4- Push the object to the array-to-be-posted (newData).
What I have that work: the list, the dynamic ngModel.
What I need: to get the data from this ngModel ad use it inside my directive.
here go the codes:
html:
<select id="newPrereq" class="form-control" name="newPrereq" ng-model="newPrereq" ng-options="prereq.name group by prereq.cat for prereq in prereqs | orderBy:prereq.name">
<option value="" hidden>-- Select --</option>
</select>
<input type="{{newPrereq.type}}" ng-show="newPrereq.array" ng-model="newPrereq[ngModel]">
<a ng-click="addItem(newPrereq, selectedPrereqs, 'prereqs')" ng-show="newPrereq !== undefined || ''">add</a>
<ul class="list-inline">
<li ng-repeat="prereq in selectedPrereqs"><span>{{prereq.name}} </span> <a ng-click="removeItem($index, selectedPrereqs, 'prereqs')">[X]</a></li>
</ul>
directive (scope:false) relevant functions:
scope.prereqs = Lists.prereqs;
scope.addItem = function(obj, array, group){
array.push(obj); // Add item to array-to-be-posted
if(obj.array){
scope.newData.prereqs.proficiencies.push({'name': obj.name, 'cat': obj.cat, 'details': [something here to get the ng-model from DOM]})
};
scope[group] = scope[group].filter(function(list){ // Remove added item from the <select>
return list !== obj;
});
scope.newPrereq = undefined;
};
part of the list (come from a Lists.js service)
'prereqs': [
{'name':'option 1', 'cat':'category 1', 'type':'text', 'ngModel':'smDetails', 'array':true},
{'name':'option 2', 'cat':'category 2', 'type':'text', 'ngModel':'srDetails', 'array':true},
]
I tried to solve this over an hour, haven't found anything online.
This is the template:
<select
ng-model="user.platform_id"
ng-options="platform.id as platform.title for platform in platforms"
id="platform_id" class="form-control">
</select>
and this is the controller :
$scope.platforms = platformsEntity.query();
// Resource object coming from UI Router resolve, already fetched with user info
$scope.user = userEntity;
the platforms resource response return the following format:
[ { id: 4, title: 'platform1'}, { id: 5, title: 'platform2' ]
the user is same, resource object with platform ID
{ id: 3, name: 'foo', platform_id: 5 }
This way I can see all the platforms in the select box but it's not getting selected by the ngModel value (user.platform_id)
The thing is that when I use plain object instead of resource:
$scope.platforms = platformsEntity.query();
$scope.user = { platform_id: 5 } ;
It is getting selected correctly ...
Update
i replicated the behavior i am looking for in ng-repeat:
<select ng-model="user.platform_id" id="platform_id" class="form-control">
<option
value="{{ platform.id }}"
ng-selected="user.platform_id == platform.id"
ng-repeat="platform in platforms"
>{{ platform.title }}</option>
</select>
It's not about using a resource, the problem with programmatic selection of ng-options is that the ng-model value should refer to the same object as in the ng-options. In order to initialize the selection, first make sure that the platforms array is populated (query might be async?), then loop through them, and set the id object of the platform of your choice as the platform_id object of the user.
Try something like this. Tell angular what you want to track the value by.
<select
ng-model="user.platform_id"
ng-options="platform.title for platform in platforms track by platform.id"
id="platform_id" class="form-control">
</select>
I have this code and information:
$scope.options = [
{ id: 1, label: "My label" },
{ id: 2, label: "My label 2" }
];
$scope.selected = 2;
<select ng-options="opt.label for opt in options" ng-model="selected">
<option value="">Select one</option>
</select>
However, the options are created like this:
<select ng-options="opt.label for opt in options" ng-model="selected">
<option value="">Select one</option>
<option value="0">My label</option>
<option value="1">My label 2</option>
</select>
How can I set the selected option to My label 2? I know it can be done:
$scope.selected = $scope.options[1];
But my problem is that option is created in a directive, and at that moment I don't know 1) how many values has $scope.options, nor 2) what is the index of the selected option in database. The only thing I know is the id (which is in the object).
The html of my directive is something like this:
<select ng-switch-when="select" ng-model="form.model[element.model]" ng-options="{{element.rule}}"></select>
Where element.rule is:
rule: "role.role for role in element.options"
And element.options has the array with options, and form.model[element.model] has the id of the option selected.
How can I get the index of the element with ID X in the array $scope.options? I'm very sure that will give me the solution, but I don't know how to do it...
Just set the correct model value when initiating the controller. You can easily get the correct array value if you know the ID by using a filter:
$scope.selected = $filter('filter')($scope.options, {id: 2})[0];
The issue with your code as I see it is that the 'selected' value coming out of your database is the ID of the object selected and not the object itself. This is fine but because of that difference you can't simply set
$scope.selected = 2 //assuming 2 is the value coming from your database
because the value '2' does not exist in your option array. The Object with an ID of 2 does.
If you can always guarantee the options you have in the option array are from 1-n and in that order, you can accomplish this by simply using this instead:
$scope.options = [
{ id: 1, label: "My label" },
{ id: 2, label: "My label 2" }
];
var selectedIdFromDatabase = 2;
$scope.selected = $scope.options[selectedIdFromDatabase-1];
If you can't make that guarantee (and even if you can for now, it may not be a good idea to make that assumption in your code) you'll need iterate over the array of objects you have to identify the object with an ID of the selectedId from your database.
The answer to this question has a great write-up about the type of data-processing you'll need to do and a lot more information about javascript objects in general.
Can't figure this out for the life of me. Using AngularJS.
I have a dropdown Select field with several options. It is a part of a form that may be completed multiple times (ie "add another" type form). Now, one of the options may only be used once. How can I remove this option from all other select fields after it has been used?
What I'm working with:
html
<select ng-model="item.itemtype">
<option ng-repeat="i in itemtype" value="{{i}}" ng-init="item.itemtype = itemtype[0]">{{i}}</option>
</select>
angularjs
$scope.Items = [
{ 'itemtype': '', 'desc': '', 'color': '' }
];
$scope.itemtype = [
'shirt',
'pants',
'hats',
'shoes',
'special'];
What I've tried (and really doesn't work)
$scope.specialremove = function() {
var exist = Items.indexOf("special")
if (exist !== 0) {
return '';
}
else {
return 'special';
}
}
I'm hoping I don't have to turn to any other framework to solve this. Feel free to point out any other problems/errors/inefficiencies in my code.
The first thing that can help is using ng-options:
ng-options="type for type in itemType".
It would be better to have objects with label and value properties, in order to write it as
ng-options="type.value as type.label for type in itemType"
and separate the displayed label from the actual value of the selection.
In your controller you should have something like:
$scope.itemType= [
...
];
$scope.selectedItem= $scope.itemType[0];
So that you can write the select as:
<select ng-Model="selectedItem" ng-options="item.value as item.label for item in itemType"></select>
To remove a selected item you can watch the value of selectedItem in the controller: when it matches the value you want, remove it from the array and update selectedItem accordingly.
Here is a basic fiddle. I simply remove the third option after selecting it, and reset the selected item to the first.