Here is what I'm trying to do:
<select name="manager" id="manager" [(ngModel)]="property.manager" class="form-control" (change)="onChangeManager($event)" required>
<option disabled value="">Select Manager</option>
<option *ngFor="let manager of managers" [ngValue]="manager" [selected]="manager?.name === 'Subhan Ahmed'">
{{manager?.name}}
</option>
</select>
What I need is when the view is initialised, I need to set the value of the select where manager?.name == property.manager.name (which is loaded from db on on another event). I've tried to place a default text Subhan Ahmed to select the default value but its not working.
Managers are loaded at the start, I load them from Firestore and assign them to a variable managers: Observable<Manager>; during subscribe(), while property.manageris loaded after another input's change event.
Am i missing something?
You can select an item of the dropdown list by setting the value of property.manager. Assuming that selectedName is the name of the Manager item that you want to select, you can do this:
// Case sensitive
this.property.manager = this.managers.find(m => m.name === this.selectedName);
// Case insensitive
let selectedNameUp = this.selectedName.toUpperCase();
this.property.manager = this.managers.find(m => m.name.toUpperCase() === selectedNameUp);
Here are the relevant parts of the markup and code. See this stackblitz for a demo.
HTML:
<select name="manager" [(ngModel)]="property.manager" class="form-control" required>
<option disabled [ngValue]="undefined">Select Manager</option>
<option *ngFor="let manager of managers" [ngValue]="manager">{{manager.name}}</option>
</select>
<input type="text" [(ngModel)]="selectedName" (ngModelChange)="onNameChange($event)">
Code:
selectedName: string;
property = {
ref_no: '',
address: '',
manager: undefined
};
managers = [
{ "company": "Test Company", "name": "John Doe", "id": "3oE37Fo2QxGHw52W7UHI" },
{ "company": "Another Company", "name": "John Brown", "id": "LRF8xAi48rRuWu0KZex3" },
{ "company": "XYZ", "name": "Subhan Ahmed", "id": "TqOQHbdwJdwgwD8Oej8v" }
];
onNameChange($event) {
let selectedNameUp = this.selectedName.toUpperCase();
this.property.manager = this.managers.find(m => m.name.toUpperCase() === selectedNameUp);
}
Related
I was wondering if it is possible to display a link that is associated with the option in the select field that the user selects. I am currently using a database to store the options and have a category in the database per option where "extra" information is stored. I was thinking that the extra information could be the link about the selected item. However,
I am unsure how to display this link as the user selects the item in the select field. I would also like the link to change when a different item is selected.
I am currently using Flask, Flask-WTF, Flask-sqlalchemy, HTML , and jsonify.
const fruits = {
"1": { "colour": "yellow", "shape": "long" },
"2": { "colour": "red", "shape": "round" }
};
const fruitSelect = document.getElementById('fruit');
function setFruitOptions() {
if (fruitSelect.selectedIndex !== -1) {
const fruit = fruits[fruitSelect.options[fruitSelect.selectedIndex].value];
document.getElementById('shape').textContent = fruit.shape;
document.getElementById('colour').textContent = fruit.colour;
}
}
fruitSelect.addEventListener('change', setFruitOptions);
setFruitOptions();
<select id="fruit">
<option value="1">banana</option>
<option value="2">apple</option>
</select>
is <span id="shape"></span> and <span id="colour"></span>.
You can deliver the necessary JS object in Flask using something like this in the template:
<script>
const fruits = {{ fruit_dict|tojson|safe }};
</script>
I use angular-ui-select2.
<select ui-select2 ng-model="vm.salonStaffModel.type">
<option ng-repeat="occ in vm.categoriesType" value="{{occ.key}}">
{{occ.key}}</option>
</select>
I bind data to vm.salonStaffModel.type successfully, when I select value from dropdown list. But when I refresh page, the value is undefined, although vm.salonStaffModel.type has value, which I have selected before. Thanks!
This is my controller
export default class SalonStaffCreateCtrl {
constructor($state, SalonStaff, SalonListService, popUpMessageService) {
this.submitted = false;
this.popUpMessageService = popUpMessageService;
this.salonListService = SalonListService;
this.salonStaffModel = {
type:"AUS"
};
this.SalonStaff = SalonStaff;
this.state = $state;
this.yesNoLazylist = [{ "key": false, "group": null }, { "key": true, "group": null }];
this.categoriesType = [{"key":"AUS","group":null,"$$hashKey":"object:259"},{"key":"BD","group":null,"$$hashKey":"object:260"},{"key":"735","group":null,"$$hashKey":"object:261"},{"key":"713","group":null,"$$hashKey":"object:262"},{"key":"714","group":null,"$$hashKey":"object:263"},{"key":"IND","group":null,"$$hashKey":"object:264"},{"key":"734","group":null,"$$hashKey":"object:265"},{"key":"711","group":null,"$$hashKey":"object:266"},{"key":"716","group":null,"$$hashKey":"object:267"},{"key":"731","group":null,"$$hashKey":"object:268"},{"key":"BUR","group":null,"$$hashKey":"object:269"},{"key":"NZ","group":null,"$$hashKey":"object:270"},{"key":"PK","group":null,"$$hashKey":"object:271"},{"key":"733","group":null,"$$hashKey":"object:272"},{"key":"SGP","group":null,"$$hashKey":"object:273"},{"key":"717","group":null,"$$hashKey":"object:274"},{"key":"T","group":null,"$$hashKey":"object:275"},{"key":"USA","group":null,"$$hashKey":"object:276"},{"key":"725","group":null,"$$hashKey":"object:277"}];
this.categoriesService = [];
this.getServiceSalon();
}
}
SalonStaffCreateCtrl.$inject = ['$state', 'SalonStaff', 'SalonListService', 'popUpMessageService'];
<div class="form-group">
<label>Type *</label>
<select ui-select2 ng-model="vm.salonStaffModel.type">
<option ng-repeat="occ in vm.categoriesType" value="{{occ.key}}">
{{occ.key}}</option>
</select>
<p ng-show="frm.type.$error.required && vm.submitted" class="red-text error-label-dropdown">Mandatory field(s)</p>
</div>
I have a .JSON file with some school subjects that have courses in them. Every subject has a code and a name attribute. Some of them have these courses that are code and name pairs in a array in the subject.
{
"bio" : {
"name" : "Biologi",
"courses" : {
"bio01" : "Biologi 1",
"bio02" : "Biologi 2",
"bit0" : "Bioteknik"
}
},
"eng" : {
"name" : "Engelska",
"courses" : {
"eng05" : "Engelska 5",
"eng06" : "Engelska 6",
"eng07" : "Engelska 7"
}
},
"sve" : {
"name" : "Svenska",
"courses" : {
"sve01" : "Svenska 1",
"sve02" : "Svenska 2",
"sve03" : "Svenska 3",
"lit0" : "Litteratur",
"ret0" : "Retorik",
"skr0" : "Skrivande"
}
}
}
I would like this to display in a select2 select input like this, giving an example with an ordinary select box:
The user should be able to choose both the whole subject, but also be able to specify themselves by choosing a course.
The select's option value should be the code of the object. Subjects use the their own three letter code, but courses first start with their subject's code, and add their own code to it. This is example code for the select above:
<label for="subject">Ämne eller kurs</label>
<select name="subject" id="subject">
<option value="bio">Biologi</option>
<option value="biobio01">Biologi 1</option>
<option value="biobio02">Biologi 2</option>
<option value="biobit0">Bioteknik</option>
<option value="eng">Engelska</option>
<option value="engeng05">Engelska 5</option>
<option value="engeng06">Engelska 6</option>
<option value="engeng07">Engelska 7</option>
<option value="sve">Svenska</option>
<option value="svesve01">Svenska 1</option>
<option value="svesve02">Svenska 2</option>
<option value="svesve03">Svenska 3</option>
</select>
How would I be able to use the data from a .JSON file with my select2 select input? Is it by AJAX request, and then, how would I go about to do that?
$("#subject").select2({
placeholder: "Välj ämne eller kurs"
});
<select ng-model="ad.Categorie"
ng-options="obj.id as obj.name for obj in categories"
ng-change="getSubcategories()"
class="form-control"
ng-required="true"
name="categorie">
<option value="">-- --</option>
</select>
When i submit getting ng-options array index instead of ad.Categorie value and i solved with hidden input
<input type="hidden" name="categorie" value="#{{ad.Categorie}}" />
but it seems wrong solution any idea?
var categories = [{"id":1,"name":"cat1"},{"id":2,"name":"cat2"}];
reading from database. I want categories id as fk
public function store(Request $request)
{
$ad = new Ad;
$ad->categorie_id= $request->categorie;
$ad->subcategorie_id= $request->subcategorie;
$ad->type_id= $request->type;
$ad->location_id= $request->location;
$ad->title= $request->title;
$ad->description= $request->description;
$ad->price= $request->price;
$ad->phone= $request->phone;
$ad->code= $request->code;
//$ad->img = $request->file('img');
//$files = $request->file('img');
$ad->save();
return redirect('/');
}
is this array $request->categorie that's why i get index?
Your code is already getting right id, I am assuming you want to get object or index. this code is for getting index, id and object:
<select ng-model="ad.Categorie"
ng-options="obj.name for obj in categories"
ng-change="getSubcategories()"
class="form-control"
ng-required="true"
name="categorie">
</select>
In your controller:
function myCtrl($scope) {
$scope.categories = [{
"id": 11,
"name": "name1"
}, {
"id": 22,
"name": "name2"
}];
$scope.ad = {}
$scope.getSubcategories = function() {
console.log("selected object= ", $scope.ad.Categorie);
console.log("selected index= ", $scope.categories.indexOf($scope.ad.Categorie));
console.log("selected id= ",$scope.ad.Categorie.id);
}
}
Here is the working example:
https://jsfiddle.net/U3pVM/30048/
In Angular Js is there a way to use a select element the same way you can with a list of links?
For example if I have some links like this:
<a ng-click="ctrl.change('argument1','argument2')">One</a>
<a ng-click="ctrl.change('argument3','argument4')">Two</a>
...
Is there a way I can do the same thing with a select element?
<select>
<option value="argument1,argument2">One</option>
<option value="argument3,argument4">Two</option>
...
</select>
you can pass the variables and model through ng-change , hope below code helps you,
template
<div ng-controller="myCtrl">
<select ng-model="item" ng-options="i.name for i in items" ng-change="changed('hello','world',item)">
<option value="">choose items</option>
</select>
</div>
controller
function myCtrl($scope) {
$scope.items = [{
"name": "first",
"type" : "type1"
}, {
"name": "second",
"type" : "type2"
}, {
"name": "third",
"type" : "type3"
}];
$scope.changed = function (hello,world,item) {
alert(hello); // argument1
alert(world); //argument2
alert(item.type); //model argument based on the selection
}
}
do u mean this? use controller value instead of scope value if u wish
<select ng-options="['a,b','c,d']" ng-model="selected" ng-change="ctrl.change(selected)">