<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/
Related
I am trying to achieve the following dynamic JSON string creation. I can produce the id part but don't how to produce the name part. Ids are from the list and name is from the textbox.
I tried a lot but nothing seems to work. I want to select both strings and text box should result as below.
{
"name": "GROUP-X1",
"objects": [{ // this part is needed as a complete string
"type": "Host",
"id": "0050569A-7800-0ed3-0000-008589948757"
}, {
"type": "Host",
"id": "0050569A-7800-0ed3-0000-008589945523"
}]
}
var output = createJSON1();
function createJSON1() {
var arr = $("#select1 > option").map((index, val) => ({
"type": "Host",
id: val.value
})).get();
return JSON.stringify(arr);
}
console.log(output);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="text" id="srch-obj" value="GROUP-X1">
<select id="select1" multiple size="2" style="width: 480px">
<option>0050569A-7800-0ed3-0000-008589948757</option>
<option>0050569A-7800-0ed3-0000-008589945523</option>
</select>
Your code already builds the objects array. As such, all you need to do is wrap the output within another object providing the name property which you can retrieve from the value of #srch-obj. Try this:
var output = createJSON1();
function createJSON1() {
let obj = {
name: $('#srch-obj').val(),
objects: $("#select1 > option").map((t, el) => ({
type: "Host",
id: el.value
})).get()
}
return JSON.stringify(obj);
}
console.log(output);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="text" id="srch-obj" value="GROUP-X1">
<select id="select1" multiple size="2" style="width: 480px">
<option>0050569A-7800-0ed3-0000-008589948757</option>
<option>0050569A-7800-0ed3-0000-008589945523</option>
</select>
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);
}
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>
My select list data looks like this
{
123: 'abc',
234: 'bcd',
.
.
}
I am using ng-options in template to render this like
<select ng-model="myOption" ng-option="key as value for (key, value) in data"></select>
Now I want to get the option text for selected option in js controller
Is it possible?
PS- I can't change the data structure of data for select list,
so make it a object of objects as shown below is out of question
{
{
name: 'abc',
value: 123
},
{
name: 'bcd',
value: 234
}
}
EDIT: I still want to be able to access the selected key i.e. 123 or 234
you can use ng-change and implement a function to get the value by key
<div>
<select ng-model="myOption" ng-options="key as value for (key, value) in data" ng-change="getVal(myOption)"></select>
{{selectVal}}
</div>
$scope.getVal = function(val){
$scope.selectVal = $scope.data[val]
}
not that its ng-options with s
demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.data = {
123: 'abc',
234: 'bcd',
}
$scope.getVal = function(val){
$scope.selectVal = $scope.data[val]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="myOption" ng-options="key as value for (key, value) in data" ng-change="getVal(myOption)"></select>
{{selectVal}}
</div>
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)">