We Keep Coding

Angular 5 Set selected value of HTML Select Element

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);
}

angularjs getting ng-options obj id instead of value

<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/

AngularJS ng-change not functioning

I have this Dropdown list in $dialogScope.items But I tried to call in function selectChange but it doesn't seems to be working. kindly help me notice the mistake
This is from the html part
<div class="form-group has-feedback">
<label class="control-label">Type</label><br/>
<select class="form-control" ng-model="selectedItem" ng-change="selectChange()" ng-options="item as item.name for item in items">
<option value=""> Select Type</option>
</select>
</div>
UPDATED
$scope.addStep = function (patchID) {
$dialog.open({
showClose: false,
closeByEscape: true,
template: 'views/app-edit/app-edit-patch-step-add.html',
controller: ['$scope', function ($dialogScope) {
$dialogScope.items = [{
name:"Download APK",
value:"0",
},{
name:"Backup",
value:"1"
},{
name:"Restore",
value:"2",
},{
name:"Download OBB",
value:"4",
},{
name: "Download OBB By GPU",
options : ["Adreno","Mali","Tegra","PowerVR","Other"]
},{
name: "Download APK By GPU",
options : ["Adreno","Mali","Tegra","PowerVR","Other"]
},{
name: "Download CACHE",
value:"7",
},{
name: "Download CACHE By GPU",
value:"8",
},{
name: "Download CACHE & Unzip After Install",
value:"9",
},{
name: "Download CACHE By GPU & Unzip After Install",
value:"10",
},
];
$dialogScope.hideMe = function(hideElements){
if($dialogScope.selectedItem){
return (hideElements.indexOf($dialogScope.selectedItem.name) != -1)?false:true;
}
else{
return true;
}
}
$dialogScope.selectChange = function(selectedItem){
if (selectedItem.value) {
$dialogScope.type = selectedItem.value;
$dialogScope.labelA = 'dferfre';
$dialogScope.labelB = '';
$dialogScope.labelC = 'MD5';
$dialogScope.stepA = '';
$dialogScope.stepB = '';
$dialogScope.stepC = '';
if (value == 0) {
$dialogScope.labelA = "APK URL";
} else if (value == 4) {
$dialogScope.labelA = "OBB URL";
} else if (value == 5) {
$dialogScope.labelB = "OBB URL";
} else if (value = 6) {
$dialogScope.labelB = "APK URL";
}
$dialogScope.$apply();
}
};

Pass the model into your function. Try this.
<select class="form-control" ng-model="selectedItem" ng-change="selectChange(selectedItem)" ng-options="item as item.name for item in items">

You should change $dialogScope.selectChange to $scope.selectChange and you also forgot to pass the variable to function from ur html. Personally I would prefer to use controllerAs syntax.
Instead of having inline controller function. Create separate controller "MyDialogController" file then replace ur html with the following html.
<div ng-controller="MyDialogController" class="form-group has-feedback">
<label class="control-label">Type</label><br/>
<select class="form-control" ng-model="selectedItem" ng-change="selectChange()" ng-options="item as item.name for item in items">
<option value=""> Select Type</option>
</select>
</div>

angularjs i am using multiple select tag how to clear its all option after saved in db

How to clear multiple select option after saving into DB, i am using ng-model to clear it. Its clearing in back-end but not in UI side.
In controller I am writing:
smsType = {};
smsType.smsTypeId = [];
HTML code:
<div class="form-group">
<select ng-model="smsType.smsTypeId" ui-jq="chosen" multiple
class="w-md"
ng-options="s.id as s.name for s in smsoption.name">
</select>
</div>
Its not reflecting in ui side
Please give me some suggestion i am new to angularjs

Please see demo below
you missed $scope here
smsType.smsTypeId = [];
should be
$scope.smsType.smsTypeId = [];
// Code goes here
angular.module("myApp", []);
angular.module("myApp").controller("SelectCtrl", ["$scope",
function($scope) {
$scope.smsoption = {
name: [{
"id": "122",
"name": "denmark"
}, {
"id": "123",
"name": "france"
}, {
"id": "124",
"name": "italy"
}]
};
$scope.saveit = function() {
console.log($scope.selectCenter);
$scope.smsType.smsTypeId = [];
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1>ngOption demo</h1>
<div ng-app="myApp">
<div ng-controller="SelectCtrl">
<select ng-model="smsType.smsTypeId" ui-jq="chosen" multiple class="w-md" ng-options="s.id as s.name for s in smsoption.name">
</select>
<hr/>You have chosen:
<span ng-repeat="type in smsType.smsTypeId">{{type}} | </span>
<button ng-click="saveit()">Save</button>
</div>
</div>

The model is the output, not the input. To clear it you need to clear smsoption. The model should reflect the options you have selected, not the other way around.
smsoption = [];
Should do it

how to use form.$addControl()

I am using Angular 1.0.8. How do you correctly add compiled form elements? I assume it has to do with how to use $addControl?
Consider this example: http://jsfiddle.net/lesouthern/LB4Tx/
After adding the select in this example, the form becomes valid only if "myInput" is entered, it does not recognize the "required" directive with the appended select.
<div ng-app="pageModule"
ng-controller="parentCtrl">
<script type="text/ng-template" id="myTemplate">
<select name="mySelect"
add-to-form
ng-model="val"
required
ng-options="o.id as o.name for o in options">
<option value="">Select my option...</option>
</select>
</script>
<form name="myForm"
id="myForm"
novalidate
ng-submit="mySubmit()">
<input name="myInput"
ng-model="myInput"
required />
<div id="dest"></div>
<button type="submit">Click me to submit</button>
{{myForm.$invalid}}
</form>
<button ng-click="mkSelect()">create select</button>
</div>
var pageModule = angular.module('pageModule',[])
.controller('parentCtrl',function($scope,$compile) {
$scope.options = [
{ id : "nissan", name: "Nissan" },
{ id : "toyota", name: "Toyota" },
{ id : "fiat" , name: "Fiat" },
{ id : "chevy", name: "Chevy" },
{ id : "honda", name: "Honda" },
{ id : "gmc" , name: "GMC" }
];
$scope.mkSelect = function() {
var dest = angular.element(document.getElementById('dest')),
html = angular.element(document.getElementById('myTemplate')).html().trim();
dest.append($compile(html)($scope));
}
$scope.mySubmit = function() {
console.log('this is my submit');
}
})
.directive('addToForm',function() {
return {
require : ['ngModel'],
controller : function() {},
link : function($scope,$element,$attr,$ctrls) {
var modelCtrl = $ctrls[0];
$scope.myForm.$addControl(modelCtrl);
}
}
});

form.$addControl() was unnecessary. I corrected my compile command and the appended element now is registering with the form controller: http://jsfiddle.net/lesouthern/8CDNc/
$scope.mkSelect = function() {
var dest = angular.element(document.getElementById('dest')),
html = angular.element(document.getElementById('myTemplate')).html().trim();
$compile(html)($scope,function(_element,_scope) {
dest.append(_element);
});
}

In case you didn't need to $compile your html, you can use the ng-show directive to hide the <select> until needed. Notice it is still required
JSFiddle with no $compile
<form>
...
<select name="mySelect" id="multipleSelect" ng-show="mkSelected"
ng-model="data.singleSelect" required>
<button type="submit">Click me to submit</button>
</form>
<button ng-click="mkSelected=true">Create Select</button>