We Keep Coding

Vue, building a select list out of array of options but pre-selecting based on async response

I've been trying to test out a way in vue to build a select list with a hardcoded array of options, however, if a certain async response/event comes in with an assignee attached, I am setting that as 'currentAssignee' which is my preselected option.
This kind of works, but it initially looks empty/invisible. If I click the seemingly non-existent select box, the options will show 'Name One', 'Name Two' and 'John Doe' which is the name from the response. But it doesn't actually satisfy the 'selected' option because it is essentially invisible to the user on page load, until it's clicked
Should I be doing something different?
<select class="firstLastNames linkBox" v-model="currentAssignee" #change="changeAssignee()" >
<option :selected="true">{{currentAssigneeFirst}} {{currentAssigneeLast}}</option>
<option v-for="assignee in assigneeOptions" >{{assignee.email}}</option>
</select>
data () {
return {
currentAssignee: '',
assigneeOptions: [
{id: 0, email: "Name one"},
{id: 1, email: "Name two"}
],
},
}
/**further down, I set currentAssignee based on async event**/
this.currentAssignee = triggerEvent[0].assignee;

I put a code sample together here which I think fixes your issue:
https://codepen.io/timfranklin/pen/bGWYggG
Take a look at what is being bound by the v-model. The "value" of a select is not the object itself, it's some value of an object.
<select class="firstLastNames linkBox" v-model="currentAssignee" #change="changeAssignee($event)" >
<option disabled >Choose One</option>
<option v-for="assignee in assigneeOptions" :key="assignee.id" :value="assignee.id">{{assignee.email}}</option>
</select>
The important note here is the :value="assignee.id";

restoring chained selects using angularjs

I have two select-element that are bound to a model in angular. The first should show a list of processes, the second a list of variables belonging to the process. My datamodel looks like this:
"processes": [
{
"name": "proces1",
"variables": [
"var1",
"var2"
]
},
{
"name": "proces2",
"variables": [
"var3",
"var4"
]
}
]
The result of my selection needs to end up in a 'slider' object in the 'sliders' array on the scope:
$scope.sliders =
[
{
process : "process1",
tag : "var1",
}
]
I've implemented the selects as below, inspired by this jsfiddle.
<tr ng-repeat="slider in sliders track by $index">
<td><select name="processSelect" ng-model="slider.process" ng-options="process.name for process in slider.processes"></select></td>
<td><select name="variableSelect" ng-model="slider.tag" ng-options="v for v in slider.process.variables"></select></td>
</tr>
The approach works, however if my model is already filled only the variableSelect is selected. The process select is not. This is caused because the processSelect uses a a list of process dictionaries instead of strings (which are stored in the model).
What can I do to achieve this? How does one normally accomplish this in angular?

I fixed this by changing my data model slightly to:
"processes": {
"process1": [
"var1",
"var2"
],
"process2": [
"var3",
"var4"
]
}
then I changed the ng-options to:
<tr ng-repeat="slider in sliders track by $index">
<td><select name="processSelect" ng-model="slider.process" ng-options="key as key for (key, value) in processes"></select></td>
<td><select name="variableSelect" ng-model="slider.tag" ng-options="value for (key, value) in processes[slider.process]"></select></td>
</tr>
basically following the angular docs on ng-options.

AngularJS: How to create a model which holds an array for a dynamic list of input fields?

I have quite an interesting question (I hope) for all you AngularJS gurus out there. I am looking to create a dynamic list of form input fields based on a SELECT dropdown. As an example, we have a number of categories with each category having a set of specifications which are unique to that category. To help with the explanation we have the following:
Firstly, in the controller we start by initializing the models.
$scope.category = {};
$scope.category.specs = [];
Next we ready the data to be used in the form (actually retrieved from the server via $http). We also initialize a variable to the first element in the categories array.
$scope.categories = [
{ "id": "1", "name": "mobile", specs: [
{ "id": "1", "label": "Operating System" },
{ "id": "2", "label": "Camera type" } ] },
{ "id": "2", "name": "laptop", specs: [
{ "id": "1", "label": "Operating System" },
{ "id": "2", "label": "Graphics Card" } ] }
};
$scope.selectedCategory = $scope.categories[0];
In the form, we have a dropdown which when selected loads the appropriate input fields specific to that category. We use the ngRepeat directive to accomplish this. This is a dynamic list of fields based on $scope.categories.specs. (please note the ???)
<select ng-model="selectedCategory" ng-options="category.name for category in categories"></select>
<div ng-repeat="spec in selectedCategory.specs">
<label>{{spec.label}}</label>
<input type="text" ng-model="???">
</div>
Ultimately, when the user clicks the submit button, we would like to extract the category he/she has selected and then package it together with the specifications they have filled in. The post request should contain something like the following for instance (of course, I only included one spec item, but in reality there would be many):
{ "id": "1", specs [ { "id": "2", "details": "RADEON HD 8970M" } ] }
Unfortunately I am not really sure how to accomplish this. I need to somehow create an array for the spec model, and then ensure that both the ID and user entered data are appropriately extracted... what goes in the ??? and what do we do after? Any help would be much appreciated.

this is how I do it. I make a form, validate it with angular, and then when its valid I submit it with a function.
<form name="signup_form" novalidate ng-submit="signupForm()"></form>
$scope.signupForm = function() {
var data = $scope.signup;
$http({
method : 'POST',
url : 'http://yoursite.com/mail.php',
data : $.param(data), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
});
}
also if you want to look at another form validation system for angular check out http://nimbly.github.io/angular-formly/#!/ It may help you solve your current form system.

In the controller, initialize $scope.specDetails as follows:
$scope.specDetails = {};
angular.forEach($scope.categories, function (category, index1) {
$scope.specDetails[category.id] = {};
angular.forEach(category.specs, function (spec, index2) {
$scope.specDetails[category.id][spec.id] = '';
});
});
In the html, replace "???" with specDetails[selectedCategory.id][spec.id]

Select default value with condition in ng-options

I have an angular app with the following array:
countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}]
with a Jade select as follow:
select(ng-model='myCountry', ng-options='country.name for country in countries')
What I would like to do is to pre-select a country based on the code for example:
select(ng-model='myCountry', ng-options='country.name for country in countries', ng-selected='country.code=="CH"')
Obviously, this solution doesn't work as ng-selected is not intended to be used in a select but in an option tag.
It is important for me to use a conditional selection and not a default index value like in the angularJS example.

From your sample above it looks like you should do this in your controller:
$scope.myCountry = $scope.countries.filter(function(c){ return c.code==="CH"})[0];
Like this:
<script>
function MyCntrl($scope) {
$scope.countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}];
$scope.myCountry = $scope.countries.filter(function(c){ return c.code==="CH"})[0];
}
</script>
Or you could try building the select with and ngRepeat which seems to be closer to what you need, like this:
Online Demo
<body ng-app="">
<script>
function MyCntrl($scope) {
$scope.countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}];
}
</script>
<div ng-controller="MyCntrl">
<select ng-model="myCountry" >
<option ng-selected="c.code=='CH'" ng-repeat="c in countries">{{c.name}}</option>
</select><br>
{{myCountry |json}}
</body>

That is what ng-model is for. I suggest you initialize myCountry in a controller. Note that myCountry should ideally have the same format as countries (eg: {"code": "ZA", "name": "South Africa"}).
Edit: I am adding an example from my own project:
<select class="small" data-ng-change="goToTask(current_task.id)" data-ng-model="current_task" data-ng-options="task.name for task in tasks track by task.id"></select>
In Controller:
$scope.current_task = { id: $scope.myService.getCurrentTaskId() };
What is important here is that current_task is at minimum a hash containing the id key.
Edit2: I was thinking about the sorting problem with the track by. I think you can use select instead, eg: `ng-options="select country.code as country.name for country in countries". I haven't tried it but from the angular docs, it should work.

NG Select from array there has to be a better way

I have an array of options, they are static and won't be changing my preference was to simply do a standard select with ng-model attached and then add my options. As far as I can tell this doesn't really work as the model does not bind. Fine. I'll do it the Angular way which is the first time I've seen the Angular way take so much more than any other way.
So I have my array
$scope.options = ['1', '2' 'Etc'];
Then the select:
<select ng-model="stupidAngular" ng-options="options as options for options in options"></select>
Is there a better way to bind the model to a select in angular?

Here is an example:
<select ng-model="selectedGroup" ng-options="group.title for group in groups">
<option value="">-- choose group --</option>
</select>
$scope.groups = [
{
title: "option 1"
},
{
title: "option 2"
},
{
title: "option 3"
}
];
There is also good documentation here.